Logo not Clear on Mobile Navigation Bar

MCarlini · March 11

My mobile header is not displaying the logo clearly enough. I would like to possibly hide the logo in the top bar where the menu is located. How can I achieve this or increase the size of the top bar so that the logo may show more clearly. So far the CSS I have tried hides the entire bar including the navigation hamburger menu. And adjusting header height does not seem to affect mobile at all.

Link to website: https://www.butlerhomebaths.com

Phil · March 12

Hi,

If you want to hide the logo for the mobile display, you can use the following CSS code:

@media only screen and (max-width:767px){
 #Top_bar #logo img{
   display: none!important;
 }
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

To adjust the header display including mobile header, I suggest using Header Builder.

https://support.muffingroup.com/video-tutorials/header-builder-2-0/

https://support.muffingroup.com/video-tutorials/building-mobile-headers/

Best regards

MCarlini · March 14

Thanks for the tips Phil. Things are running well now. The video tutorials are much appreciated.

Logo not Clear on Mobile Navigation Bar

Comments