fbpx
Welcome, Guest
Username: Password: Remember me

TOPIC: Change Menu Styles in Astroid Framework in JDesire theme

Change Menu Styles in Astroid Framework in JDesire theme 5 months 2 weeks ago #17415

  • aditit
  • aditit's Avatar
  • Offline
  • New Member
  • Posts: 4
  • 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 5 months 2 weeks ago #17418

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 598
  • Thank you received: 84
  • Karma: 19
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: 5 months 2 weeks ago by Lalit Kumar.
The administrator has disabled public write access.

Change Menu Styles in Astroid Framework in JDesire theme 5 months 2 weeks ago #17434

  • aditit
  • aditit's Avatar
  • Offline
  • New Member
  • Posts: 4
  • 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 5 months 2 weeks ago #17443

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 598
  • Thank you received: 84
  • Karma: 19
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: 5 months 2 weeks ago by Lalit Kumar.
The administrator has disabled public write access.

Change Menu Styles in Astroid Framework in JDesire theme 4 weeks 1 day ago #19800

  • aditit
  • aditit's Avatar
  • Offline
  • New Member
  • Posts: 4
  • Karma: 0
Thanks for the code. It worked.
Two more queries i have -
1. I want that on hover over main menu - Menuitem background color should change(as in pic)
2. I want to reduce width of menu
Attachments:
The administrator has disabled public write access.

Change Menu Styles in Astroid Framework in JDesire theme 4 weeks 11 hours ago #19811

  • Lalit Kumar
  • Lalit Kumar's Avatar
  • Offline
  • Moderator
  • Posts: 598
  • Thank you received: 84
  • Karma: 19
Hello,

1. Add the following CSS in custon.css file.

.astroid-nav .nav-link:hover,
.astroid-nav .nav-link:focus {
background-color: #e0ddd5;
}
Path: JoomlRoot\templates\tpl_jddesire\css

2. Which menu width do you want to reduce?: Main Menu OR Sub Menu
'See Screenshot: www.screencast.com/t/BjWIkZDexc

Thanks,
Lalit
Thank You,
If you like our support and products, tweet us at JoomDev and let the world know about it.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.229 seconds