Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 12, 2017 at 8:54 pm #888068
    davidsg7

    Hello,
    I have the following quick css to add a red bottom border to the current menu item:

    .current-menu-item span.avia-menu-text {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #be1622;
}

    However this is having the result that sub items of the active item are also being styled in this way, which I don’t want. The main item is an ID on my homepage and the sub items are separate pages.

    Could you suggest the correction needed to the above?
    Thanks in advance
    David

    December 13, 2017 at 2:01 pm #888355
    Rikard

    Hey davidsg7,

    Please try this instead:

    .current-menu-item > span.avia-menu-text {
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #be1622;
}

    Best regards,
    Rikard

    December 14, 2017 at 10:43 am #888807
    davidsg7

    Hi Rikard,
    Thanks for the response. I’m afraid the change you suggested above removes the border styling completely from the menu – do you have any further suggestions?
    Many Thanks
    David

    December 14, 2017 at 4:18 pm #888938
    Victoria

    Hi David,

    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

    
.current-menu-item span.avia-menu-text {
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #be1622;
}
.current-menu-item .sub-menu span.avia-menu-text {
  border: none;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.