Tagged: 

Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • August 22, 2018 at 2:02 pm #1000327
    Daniel

    Hi,

    In a menu I’m creating I want to have the active menu item bold. When I do this using .current-menu-item span.avia-menu-text or .av-main-nav .current_page_item a > .avia-menu-text it works perfectly. But: all the sub-menu items under that active menu item are also bold. Two questions:

    – How can I prevent this, so when the main menu URL is active, only the main menu link is bold?
    – If a submenu item is active, how can I make that submenu item plus the main menu item bold?

    Thanks!

    August 23, 2018 at 8:28 am #1000600
    Rikard

    Hey Daniel,

    Could you post a link to where we can see the elements in question so that we can take a closer look please?

    Best regards,
    Rikard

    August 23, 2018 at 8:40 am #1000607
    Daniel

    Oh sorry, I forgot! It’s in the private section.

    August 23, 2018 at 10:37 am #1000666
    Rikard

    Hi,

    Thanks for that. Please try this CSS as well, below your other CSS you referred to in your initial post:

    .current-menu-item .sub-menu span.avia-menu-text {
  font-weight:500 !important;
}

    Best regards,
    Rikard

    August 23, 2018 at 11:14 am #1000678
    Daniel

    Hi Rikard,

    This works great when the main menu link it the active page, thanks. But when the submenu item is the active page, it is not bold, nor is the main menu item. So this question remains:

    – If a submenu item is active, how can I make that submenu item plus the main menu item bold?

    Thanks!

    August 23, 2018 at 10:14 pm #1000986
    Nikko

    Hi Daniel,

    Try using this css code:

    #top #avia-menu .current-menu-item > a > .avia-menu-text {
    font-weight: 700 !important;
}

    Let us know if this helps.

    Best regards,
    Nikko

    August 24, 2018 at 8:44 am #1001060
    Daniel

    YES! Thank you @Nikko!

    August 24, 2018 at 10:29 am #1001098
    Daniel

    Ah one last thing :) How can I make this work for the mobile menu?

    August 24, 2018 at 1:45 pm #1001215
    Victoria

    Hi Daniel,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
	font-weight: 700;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 25, 2018 at 12:46 pm #1001622
    Daniel

    Hi Victoria,

    That css doesn’t mention any active menu item, so all items will have a font-weight: 700;. I tried several different options with the current-menu-item but no success yet. Can you help me?

    • This reply was modified 6 years, 2 months ago by Daniel.
    August 26, 2018 at 6:43 pm #1001912
    Victoria

    Hi Daniel,

    I thought you wanted to make all the items bolder.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.current-menu-item .sub-menu a {
    font-weight: 500;
  }
  #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.current-menu-item a {
    font-weight: 700;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 27, 2018 at 5:53 pm #1002387
    Daniel

    Hi Victoria,

    Sorry for the confusion, I’m happy you understand me now :) We’re almost there, one last thing.
    – If a submenu item is active, how can I make that submenu item plus the main menu item bold?

    Thanks!

    August 28, 2018 at 8:38 am #1002587
    Nikko

    Hi Daniel,

    I think you can do that by adding this code:

    #top #wrap_all #header #av-burger-menu-ul > li.current-menu-parent > a {
    font-weight: 700;
}

    after this line in Victoria’s code:

    @media only screen and (max-width: 767px) {

    Hope this helps.

    Best regards,
    Nikko

    August 28, 2018 at 8:50 am #1002592
    Daniel

    Hi Nikko,

    This code makes the parent bold when a child-menu item in the sub-menu is the current active page. It doesn’t make the child-menu item bold nor does it work for main menu items.

    Warm regards,
    Daniel

    August 28, 2018 at 9:12 am #1002599
    Guenni007

    allthough i do not see your page link : try this please:

    #av-burger-menu-ul :not(.active-parent-item) .current-menu-item > a .avia-menu-text {
    font-weight: 700 !important;
    color: red !important;
}

    but now i’m looking for the soluiution if there was a top menu point
    to come:

    August 28, 2018 at 9:25 am #1002606
    Daniel

    Hi Guenter,

    That’s it! Thanks so much!

    Regards,
    Daniel

    August 28, 2018 at 9:27 am #1002607
    Guenni007

    it is only the half solution !
    if there is a top level point this does not do the trick – i have to look deeper

    August 28, 2018 at 9:29 am #1002609
    Daniel

    What do you mean by top level point?

    August 28, 2018 at 9:51 am #1002610
    Guenni007

    i meant: if you got a top level menu point which does not have submenu !

    the color: red is for me just to see it better on menu:

    #av-burger-menu-ul :not(.active-parent-item) .current-menu-item > a .avia-menu-text {
    font-weight: 700 ;
    color: red ;
}

#av-burger-menu-ul li.current-menu-item:not(.av-width-submenu) > a .avia-menu-text {
    font-weight: 700;
    color: red ;
}

    guess it will work without !important

    August 28, 2018 at 9:58 am #1002612
    Daniel

    Works here, without sub-menu items: http://up.daan.me/c0aefd79a1d0
    And also with sub-menu items: http://up.daan.me/566ed936bec7

    August 28, 2018 at 10:06 am #1002614
    Guenni007

    yes – if you like to have the parent bold too – than this will be easier.
    the code only highlites the active menu point ( not the parent of an active menu item)

    August 28, 2018 at 10:11 am #1002618
    Daniel

    Hi Guenter,

    Thanks for your explanation. This was exactly what I was looking for however.

    August 28, 2018 at 1:10 pm #1002669
    Rikard

    Hi,

    Great, glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    August 28, 2018 at 1:17 pm #1002676
    Daniel

    Hi Rikard,

    You can close the ticket.

    August 28, 2018 at 9:51 pm #1002861
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘Make active menu item bold, not all sub-menu items’ is closed to new replies.