-
AuthorPosts
-
December 24, 2015 at 12:30 am #557270
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 9 years ago by bobfurgo.
December 27, 2015 at 10:57 pm #557626Hey 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,
YigitDecember 28, 2015 at 8:21 pm #557825Hello. 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 #558020Hi,
Try the following as well
#mobile-advanced li a { font-size:24px !important; line-heigh:24px !important; }
Thanks,
RikardDecember 29, 2015 at 7:00 pm #558201Thanks 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 #558992Hey!
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 -
AuthorPosts
- You must be logged in to reply to this topic.