Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 6, 2020 at 11:42 pm #1182181
    Eric

    Hi Enfold Support,
    How can we make the upper top most secondary navigation bar have the same styling as the main primary navigation? Currently the menu selection or the drop down menu don’t highlight when a mouse hovers over them. And there doesn’t seem to be any styling options in the Advanced Styling section or the General Styling section to change the background color on hover, text link color on hover, etc. Am I missing something or do we need to add custom CSS to update? If the latter, can you please share what that would be?
    Thank you for your help!
    Eric

    • This topic was modified 4 years, 10 months ago by Eric. Reason: improved descriptive title for support request
    February 9, 2020 at 6:43 pm #1182802
    Victoria

    Hey Eric,

    Yes, the top header can be styled by the custom css but I cannot style it right now as it is broken.

    Please have a look at the solution here:

    dynamic_avia making WAY too many calls

    Best regards,
    Victoria

    February 10, 2020 at 8:04 pm #1183208
    Eric

    Not sure what happened as it was working prior to writing this request. We updated to the back up CSS we had and it’s working fine. Not sure where you’re seeing WAY too many calls with the dynamic avia code. Please advise. Thanks!

    February 10, 2020 at 9:32 pm #1183270
    Victoria

    Hi Eric,

    It looks ok on my end now too :) Now back to the issue.

    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 #header_meta nav li.menu-item:hover > a {
    color: aqua;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 10, 2020 at 11:54 pm #1183303
    Eric

    Thank you Victoria! This helps a lot. What can we add so that it has the same background color on hover as the main nav drop down menus? We’re also noticing that it’s not dropping down directly below the main link but off to the left. Where is the css snippet to keep it aligned directly below the nav link?

    Also, is there a way to have it appear on the mobile menu? The secondary top nav disappears once we’re in mobile portrait screens. Thank you!

    February 11, 2020 at 3:11 pm #1183530
    Victoria

    Hi Eric,

    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 #header .sub-menu {
    left: 0;
}
#top #header_meta nav li.menu-item:hover > a {
    color: aqua;
    background-color: #444;
}
#top #header_meta nav li.menu-item:hover  {
    background-color: #444;
}
#top #header_meta nav li {
    height: 31px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 11, 2020 at 11:41 pm #1183698
    Eric

    Hi Victoria,
    You’re the best! Thank you! This works great. The only issue is that the background on part of the top nav item isn’t filling the entire rectangular area as it does with the sub nav menu items. Also the text link isn’t aligned with the text links in the sub nav menu. Can we fill in the entire background as well as have the text align with the sub nav menu item text? Thank you!

    /* SECONDARY TOP NAV STYLING FIX */
    #top #header .sub-menu {
    left: 0;
    }
    #top #header_meta nav li.menu-item:hover > a {
    color: #57c7ef;
    background-color: #444;
    border: none!important;
    }
    #top #header_meta nav li.menu-item:hover {
    background-color: #444;
    }
    #top #header_meta nav li {
    height: 31px;
    }
    #top #header .sub-menu li a {
    font-size: 12px !important;
    }

    February 18, 2020 at 1:18 pm #1185629
    Victoria

    Hi Eric,

    Sorry for getting back to you so late.

    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

    
#header_meta .sub_menu {
    top: 0;
}
#header_meta .sub_menu li {
    line-height: 30px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 24, 2020 at 10:48 pm #1187509
    Eric

    Thank you! This works although the drop down sub menu is overlapping the top link. What adjustment can I make to the custom CSS to have the drop down sub menu move down so it’s not covering the top menu item? Thanks again for your help!

    February 25, 2020 at 5:53 pm #1187795
    Victoria

    Hi Eric,

    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 .sub_menu li ul {
    top: 31px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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