I’m making a site where I’d like to use a quite wide logo, but it doesn’t adapt to the screen width. So on small screens it ends up behind the mobile menu button and pushes the search button down into the slider. Can this be fixed?
I’d also prefer to have the mobile menu button on the right side instead of left.
Also, I’m not seeing any items in the mobile menu dropdown?
First make sure to have enabled the menu drop down in mobile. Find it in General Options > Header Options > Show Responsive Menu Dropdown, set it ON.
Since the logo in mobile is quite large, it is difficult to make logo and mobile menu fit in the same line. You can have the menu and search in the same line under logo and before slider. To have this layout, please add this code into your custom css box:
With that code the logo becomes distorted on mobile and the menu is still located on top of the logo and the search still jumps down on top of the slider.
Can you please explain better what do you mean by “logo is distorted”? I see it centered (screenshot), do you not wnat it this way?
For the menu, please edit this line: .mobile_small_menu { top: 92%;} of the code above to this: .mobile_small_menu { top: 92% !important;}
Can you show us a screenshot of the search on top of slider? I do not see it now.
By “distorted” I mean that the width is compressing the logo, so the circle in the logo becomes egg-shaped. The width is responsive, but not the height. The search has disappeared entirely, but it doesn’t matter.
Screenshot – the left side is how it looks now, the right side is how I want it to look.
Also, when I click the menu it is empty. Do I have to set up a separate mobile menu or something?
