[Resolved] Positioning logo

[Mark]

Hi,

I would like to be able to position my logo so it overlaps the menu bar below it and does not increase the size of the header area. How can I have the logo positioned overlapping outside of the header area? I hope that I am asking this clearly.

[Leo]

Hi Mark,

I believe this is what you are after: https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/#post-246468

Let us know.

[Mark]

Ok, actually this helps me narrow down what I really want. I still want a header but want the logo laying onto of the header and main nav bar – overlapping them both. And then when you scroll down the logo resizes to fit inside of the nav area. So large logo to small when you scroll down.

[Leo]

Can you show us what you have so far?
Are you using sticky navigation? If so you the logo should resize if you upload it in Customizer > Layout > Primary Navigation > Navigation logo. Then set Navigation Logo Position to Sticky.

[Mark]

Ok, I’ve got the logo positioned the way I want it. But the resize is not happening when I scroll down.

In Layout, Primary Navigation I have Navigation logo position set to Sticky and Static. If I set it to Sticky the logo disappears but then appears when I scroll down

Here is CSS:
.main-navigation .sticky-logo {
position: absolute;
left: 0;
top: 0;
height: 60px;
margin-top: -75px;
z-index: 100;
}

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

[Tom]

Any chance you can link us to your site? We should be able to provide some code to make the navigation logo size back to normal on sticky (and I’ll make an article in the docs about it).

Thanks!

[Leo]

Hi Mark,

We’ve received the link and I have deleted the post.
Looks like the site is under maintenance mode though, all I see if “we are coming soon”.
p.s. next time you can send the link through the contact page https://generatepress.com/contact/ if you want to keep it private 🙂

[Mark]

Oh sorry, I have taken site out of maintenance mode. Thank you

[Tom]

Try this as your CSS instead:

#site-navigation .sticky-logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    margin-top: -75px;
    z-index: 100;
}

#site-navigation .sticky-logo img {
    height: auto;
}

[Mark]

Oh and just to follow-up, when I click Support on the Contact page it leads me back here to forum. Are you saying I should click on Pre-Sale or Account Issue and send it that way? Thanks

[Mark]

Yes sir, that fixed it! Thanks Tom!

[Tom]

You’re welcome 🙂

[Mark]

A follow-up to this old post…

Is there a way to resize and/or reposition this logo when on mobile?

[Tom]

You can use a media query to apply CSS on mobile only:

@media (max-width: 768px) {
    /* mobile CSS in here /*
}

[Mark]

I’m just not getting it. I wonder if I need to just give up on this idea of having the logo show up when the page is scrolled down. Maybe I have made my life unnecessarily complicated

I have sent link to site in email for you to look at.

Thanks!
Mark

[Author]

Posts