[Support request] Logo overlapping the menu as per

[Simon]

Hi, I’m trying to replicate the overlapping logo as shown in your image from the second comment within the post. Is this still possible, if so can you help me recreate it please? The post is:

https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/

[Leo]

Hi there,

Definitely possible.

Can you activate this option and make sure the logo is uploaded and link me to the page in question?

[Simon]

Hi Leo,

I don’t understand which option you refer to. The instructions i have followed thus far include:

1. Disable your header: – Added in Additional CSS

.site-header {
display: none;
}

2. Upload a logo to your navigation in “Customize > Layout > Primary Navigation” and set it to “Static + Sticky”. –
I used Customise > Layout > Header as there was no option to upload an image in Primary Navigation (I guess it’s been updated since the original post?)

3. Set your navigation logo to be absolute so it’s not confined to the container:
Added in Additional CSS

.main-navigation .sticky-logo {
position: absolute;
left: 0;
top: 0;
height: 160px;
}
4. Set the height of the image to auto (or whatever you like): – Added in Additional CSS

.main-navigation .sticky-logo img {
height: 160px;
}

The site is behind a holding page at the moment and I’ll gladly give you access however I’m reluctant to put them in here as this is public right?

I also think this may be a more difficult task than I originally expected as it comes to mind that there is a different logo which is mostly horizontal for in the mobile menu bar and this square(ish) one which i’m hoping to overlap on desktops (and possibly tablets).

How can I get log in details to you?

[Leo]

I’m sorry – I forgot to provide the link to go with my reply.

This is the link I’m referring to:
https://docs.generatepress.com/article/navigation-as-a-header/

You can actually undo all of the steps you listed above and just click to activate the option.

Once you do that, I can provide the CSS to make it work.

Let me know 🙂

[Author]

Posts