[Resolved] floating logo and menu over content

[Pavla]

Hi! I want to achieve a floating logo and menu over content (logo on left, menu on right).
I installed generate press on a testsite, would you mind help me out with that? there are just sooo many options its overwhelming.

Thanks in advance!!

[Leo]

Hi there,

Can you activate this option first?
https://docs.generatepress.com/article/navigation-as-a-header/

Let me know 🙂

[Pavla]

o.k. i think i managed it somehow playing around with the header element. On desktop it looks like I need (White medium transparent background on the menu items but not on logo, floating over content). But on mobile the white menu background is on the whole header width and i want it only on the menu to be readable on all different colours of content. How can I manage it?
there seems also to be some white backgrounded space on first loading on desktop on safari.
thanks!

[Tom]

Hi there,

Does this CSS help?:

.header-wrap #mobile-header:not(.toggled):not(.navigation-stick) .menu-toggle {
    background: rgba(255,255,255,.5);
}

.header-wrap #mobile-header:not(.toggled):not(.navigation-stick) {
    background: unset;
}

Let me know 🙂

[Pavla]

Ok perfect! that helped! thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts