Tagged: hamburger, hamburger icon, mobile
Hi,
Love the theme and Im using it at http://www.mbaek.com. Thanks for making WP worth the while ;)
I have 2 problems I hope u guys can help me with.
1. How can I remove the black bar at the top of the page when seen on mobile? (see pic)
2. How can I remove the Hamburger function which displays on mobile devices? I only have 4 links, which I hope to display under the header with smaller font-size, so that it fits the screen. I can only find an option to activate it for tablets and smartphones, but not an option to deactivate it and just show my 4 links.
I have come to a solution on my tablet in portrait mode.
Hope you guys can help ;)
Hi @morten008;
#1 – the black bar at the top of the page when seen on mobile is because of to this code in your custom css :
.logo.bg-logo {margin-top: 70px; }
#2 – You can remove the humbourger and show the main menu for mobile devices by adding these lines into your custom css : (adjust “padding-top” for main menu and “heught + line-height” for menu links (ul >li > a)
@media only screen and (max-width: 767px) {
.container #advanced_menu_toggle, #advanced_menu_hide{display: none !important;}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu{display: block !important;}
.main_menu{padding-top:0px; }
.main_menu {float: left !important;}
#top #header_main > .container .main_menu ul > li > a{ height: 20px !important; line-height: 20px !important;}
}
@begrafiks
thanks a lot!!
@morten008
Let us know if you need some more help with this.
Best regards,
Andy
Thanks! It was just what i needed. Just add’ed a little more styling to fit my design!