I have created a new blog for my wife, which at the moment has minimal content. It has a logo at the top/centre, and the Blog page and About page. The logo does not suit being squashed into the top/left corner on the smaller screens, and the site does not warrant the mobile menu button as there are not many pages to look at.
So how can I just disable the mobile menu. It is not enabled on the iPad and looks great. I would like it to still be responsive, but not change the heading style on phones – just to continue with the logo top/centre, and the two menu options underneath.
Is this possible and easy to enable somehow?
Thanks for your help and a great theme.
Hey mdelmarter!
Try adding this to your custom CSS.
nav.main_menu { display: block !important; }
#advanced_menu_toggle { display: none !important; }
Cheers!
Elliott
Hi Elliot,
Thanks for the reply. That CSS successfully hides the menu button on the phone, but does not achieve the over goal which is to restore the logo to the top/centre of the page (it is still showing on the left) and to show the menu bar with the menu links the same as shows on the tablet and desktop…
As mentioned in my original post:
I would like it to still be responsive, but not change the heading style on phones – just to continue with the logo top/centre, and the two menu options underneath.
… i.e. the same as it appears on the larger devices.
Hope that makes sense.
Matthew
Hey!
I see. Try adding this also.
.main_menu .avia-menu, #header_main_alternate { display: block !important; }
#header_main > .container {
min-height: 220px;
}
.responsive .logo a img {
height: auto !important;
max-height: 9999px !important;
width: 100% !important;
}
.responsive .logo { margin: 0px auto !important; }
Cheers!
Elliott
Thanks Elliot! Absolutely perfect. Does exactly what I want :)