Header problems in mobile menu (Pro)

[Naztrida]

I have been working on a new header for my website. However, I cannot make the responsiveness behave the way I want it to. The site is www.rearviewteater.dk.

How do I make sure the adjustments I make to margin and padding in the desktop layout don’t affect the mobile layout?

Right now, it pretty much looks the way I want it to on desktop, but on mobile the logo is off center (vertically), and I would like the name to be centered (instead of being affected by the padding I added between the logo and the text).

How do I do that? Before I switched to pro recently, I added some custom css that I found in the forum, and it did the trick to make it look good on mobile back then. I have left it in there, just so you can see it.

/Astrid

[nabeel]

Hi there,

Thanks for writing in! Since you’re using Pro, you can create a separate logo bar for mobile devices and hide it on desktops screens (see screenshot below). You need to hide your desktop logo bar in mobile devices as well. So you you’ll have two bars basically, one for desktop and one for mobile devices.

Hope this helps!

[Naztrida]

Thank you for your help. I have now created separate menus for mobile and for everything else, but when I activate the mobile menu, the menu for everything else goes missing - even though I have toggled visibility in the customize panels.

For the mobile menu, I have added to hide everywhere else, and for everything else, I entered a setting to hide on mobile. Isn’t that correct?

Right now I have no mobile menu, because when I activate it, the other one disappears.

Thanks in advance!

[Naztrida]

I think I solved it. Turns out I shouldn’t make a new header, but create new bars in the existing header.

Sorry for any inconvenience - thanks!

[Alaa]

I’m glad you managed to get this one sorted out, you are welcome