[Resolved] Making logo bigger than the nav bar in sticky nav

[Jessica]

First of all thank you for this great theme! It’s my first time using it and am loving the flexibility it gives a non-coder designer like me to build a site from scratch.

I have a sticky nav bar with a logo top left. I would like my logo to stick out from the nav bar and you will see I’ve pretty much got the desired effect on desktop (eyeswi.de – site is password protected – pw: ninajess).

It looks great when nav bar is stuck at the top, my problem is when you scroll down the page you still notice the bottom of the logo in the top left. I managed to solve this problem on desktop by shrinking the logo using this:

.main-navigation.is_stuck .sticky-logo,
.main-navigation.is_stuck .sticky-logo img {
height:62px !important;
margin-bottom:-1px;
}

But I can’t seem to work out the selector to target the same thing on mobile. Can you help me with finding this?

Also, although this works, it’s not entirely the desired effect I had in mind… I would prefer to keep the logo at the same size the whole time, and always protruding from the nav bar but I can’t for the life of me work this out. Is there a way to achieve this for both mobile and desktop?

Thanks a mil 🙂

[dasigna]

thats a little tough one!
tried to figure out a similar thing recently, only with sticking out logo at the top. but bottom seems to be a step further though 🙂

not finished yet, but first you have to tweak two things:
– mobile navigation
– sticky navigation

imho theres no way to get over this if you simply let the logo stick out beneath (because it simply exeeds the nav-container height amount which is hidden on sticky scroll down). seems you have to fiddle a way to adjust the height of the navigation container and tweak it by using a partly transparent png as nav-background.
thats the solution ive found so far.
but of course there might be a better solution only by pure css – in which i might be interested too.

[Leo]

Hi there,

Are you looking for this effect here? https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container

If not can you link us to your site or provide the password to unlock it?

Only admins (myself and Tom) can see the link 🙂

Let me know.

[Jessica]

Hi Leo,
No I already have this effect. What I’m looking for happens on scroll down. Please do check my URL.
Thanks 🙂

[Leo]

I did check but it’s password protected 🙂

[Jessica]

Doh. I did mention this in my initial query…
(eyeswi.de – site is password protected – pw: ninajess).
Thanks

[Leo]

Sorry I missed that. Now I’m confused though. So you want the logo to always look like this?
http://www.screencast.com/t/1kvmAaum9L

Then removing this extra CSS you’ve added should work:

.main-navigation.is_stuck .sticky-logo,
.main-navigation.is_stuck .sticky-logo img {
    height:62px !important;
    margin-bottom:-1px;
}

Let me know what I’m missing 🙂

[Jessica]

Thanks I have tried that and the CSS in
https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container
but that doesn’t work.
My problem is with the logo protruding from stickynav. I guess I can live with the way I have made it on desktop as this whole conversation going round in circles…
Can you please just tell me the selector to target the logo on mobile, when the stickynav is hidden?
Thanks,
Jess

[Leo]

Try this:
.mobile-header-navigation:not(.navigation-stick) .mobile-header-logo img

[Jessica]

Thanks, but I’m afraid that’s just targeted the logo in it’s default position not when I scroll down… Here’s a screengrab what i’m trying to get rid of…

[Leo]

What if you change this CSS:

.mobile-header-navigation .mobile-header-logo img {
    height: 84px !important;
    z-index: 100;
    padding: 0 !important;
    margin-bottom: -24px;
}

With this selector?
.mobile-header-navigation:not(.navigation-stick) .mobile-header-logo img

[Jessica]

Thank you

[Leo]

No problem!

[Author]

Posts