Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 24, 2015 at 12:30 am #557270
    bobfurgo

    I currently have my navigation displaying on desktop and laptop as if it were on mobile using this CSS:

    @media only screen and (max-width: 10000px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    I was wondering if there was a way to customize this menu slightly so that:

    1.) the font sizing was larger and had more vertical spacing
    2.) the grey borders are removed
    3.) the arrow icons next to the menu items are removed
    4.) the peach hover is removed and
    5.) possibly replaced with a different hover type, perhaps and underline hover?

    Also, when you open the menu on desktop of laptop, the close button does not appear directly over the hamburger menu icon. it appears in the upper right. Is there a way to fix this? (it aligns perfectly on mobile though)

    • This topic was modified 8 years, 11 months ago by bobfurgo.
    December 27, 2015 at 10:57 pm #557626
    Yigit

    Hey digitalammo!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #advanced_menu_toggle {
    font-size: 50px;
    height: 65px;
    width: 65px;
    line-height: 65px;
}

#mobile-advanced a, #mobile-advanced .mega_menu_title {
    border: none!important;
}

#mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before { display: none !important; }

#advanced_menu_toggle:hover {
    color: #cccccc!important;
    background: white!important;
    border: none;
    border-bottom: 2px solid #cccccc;
}

    Regards,
    Yigit

    December 28, 2015 at 8:21 pm #557825
    bobfurgo

    Hello. Thanks Yigit! The dividers and icons are now gone, however the font size and line height remains unaffected. Also, it looks like the underline hover effect has been placed on the navigation hamburger icon instead of underneath the menu items. Lastly, the X to close the box does not align correctly with the menu icon, it appears in the upper right rather than directly over the hamburger.

    Sorry if I wasn’t clear enough!

    December 29, 2015 at 7:24 am #558020
    Rikard

    Hi,

    Try the following as well

    #mobile-advanced li a {
font-size:24px !important;
line-heigh:24px !important;
}

    Thanks,
    Rikard

    December 29, 2015 at 7:00 pm #558201
    bobfurgo

    Thanks Rikard! That worked for the font sizing and line height. :)

    Any way to remove the peach colored over and fix the toggle hover to target it for the menu items instead of the hamburger nav icon? And lastly fix the close icon mis-alignment?

    January 4, 2016 at 4:45 am #558992
    Ismael

    Hey!

    Use this for the hover effect:

    #mobile-advanced li > a:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
    background-color: #fff;
    color: #cfc0b8;
    text-decoration: underline;
}

    What do you mean by “close icon mis-alignment”? Please provide a screenshot.

    Cheers!
    Ismael

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