fbpx
Introducing JD Builder - Now Beat the unbeatable designsDownload For Free
Welcome, Guest
Username: Password: Remember me

Like using Astroid?

Help us improve Astroid by providing some quick feedback.

Take the survey

TOPIC: Change Menu Styles in Astroid Framework in JDesire theme

Change Menu Styles in Astroid Framework in JDesire theme 1 month 1 week ago #17415

  • aditit
  • aditit's Avatar
  • Offline
  • New Member
  • Posts: 2
  • Karma: 0
Hi
I am working on a website using astroid framework. I want some designing in menu -
1. Dropdown arrows should not come
2. Menu item should be boxed or any boundary should be there.

There are 2 icons coming after menu item. I found a code to remove it. One arrow disappeared one is still coming up.
.astroid-header .astroid-nav > li.nav-item-level-1.has-subnav > a span:after {
display: none;
}

You can see in attachment two were coming. I added this code. One was removed. So what can be done to remove both the arrows and give a boxed appearance.

unitedseniorsassociationofpittsburgh.org/

Thanks
Attachments:
The administrator has disabled public write access.

Change Menu Styles in Astroid Framework in JDesire theme 1 month 1 week ago #17418

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 486
  • Thank you received: 67
  • Karma: 14
Hello,

1. Add the following CSS in custom.css file
header .astroid-nav .nav-item-parent .nav-title > .nav-item-caret {
display: none;
}
Path: JoomlaRoot\templates\tpl_jddesire\css
Note: If you will not get a custom.css file here, so you have to create a custom.css file yourself.

2. You can set the Header section in boxed container from astroid backend Go to Layout Open the section and choose the Section Layout: Container
See Screenshot:
1. www.screencast.com/t/DyTVZ8n7ht5
2. www.screencast.com/t/99a7mnFEY48

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
Last Edit: 1 month 1 week ago by Lalit Kumar.
The administrator has disabled public write access.

Change Menu Styles in Astroid Framework in JDesire theme 1 month 1 week ago #17434

  • aditit
  • aditit's Avatar
  • Offline
  • New Member
  • Posts: 2
  • Karma: 0
Hi
Thanks for the code.
Arrows were removed.
But for menu style - What is happening now is the menu item which is active - text is only highlighted not the block(ie background). Please see reference image.

Thanks
Attachments:
The administrator has disabled public write access.

Change Menu Styles in Astroid Framework in JDesire theme 1 month 1 week ago #17443

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 486
  • Thank you received: 67
  • Karma: 14
Hello,

Add the following CSS in custon.css file.
.astroid-nav .nav-link.active {
   background-color: #fff;
}

Path: JoomlRoot\templates\tpl_jddesire\css
Note: If you will not get a custom.css file here, so you have to create a custom.css file yourself.

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
Last Edit: 1 month 1 week ago by Lalit Kumar.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.267 seconds