[Resolved] Floating logo and floating sticky logo

[Harris]

Hello,

HOw can i achieve floating logo (outside header) and also the sticky header logo floating.
I tried some examples I found in the documentation with no sucess.

.main-navigation .site-logo.navigation-logo {
    position: absolute;
    left: 0;
    top: 0;
}
.main-navigation .site-logo.navigation-logo img {
    height: auto; /* Set the image height of logo in px */
}

I also tried the way I had handeled it in another site, but its not working either for some reason

/* Set navigation logo to be absolute so it’s not confined to the container */
.main-navigation .sticky-logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
}

    
/* Set the height of the image to auto (or whatever else)  */
.main-navigation .sticky-logo img {
    height: auto;
    padding: 0;
    margin: 0;
    z-index: 100;
}

[Leo]

Hi there,

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

Then that CSS should work.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Harris]

Edit: Found it. It’s in the bottom. Blind! 🙂

Hello,

For some reason this option does not exist
https://i.gyazo.com/115deab39027b7f0f45cf1742d60777b.png

[Harris]

Still doesn’t seem to be working though….

[Harris]

And another thing. Why the navigation height does not shrink when turning to sticky?

Primary navigation menu item height is set to 90 and sticky nav menu item height is set to 65

[David]

Hi there,

can you share a link to your site where i can see the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Harris]

Sure. I had shared one in the initial post (private info).
I am adding it here too

[Tom]

Hi there,

The shrinking issue is a bug in 1.12 – it’s fixed in 1.13 which will be released in January.

For now, this CSS should help for both things:

.navigation-stick .site-logo {
    position: absolute;
    left: 0;
    top: 0;
}

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

.main-navigation.sticky-navigation-transition .menu-bar-item > a {
    line-height: 65px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Harris]

Thanks Tom!
Should I remove this CSS in the next release?

[Leo]

You can remove this block of CSS only in the next release:

.main-navigation.sticky-navigation-transition .menu-bar-item > a {
    line-height: 65px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Harris]

Great, thanks!

One last thing.
The logo height I define in the css (instead of the “Auto” provided) makes the logo too big in the mobile sticky view.
Is there some way to resize it just in the mobile and sticky view?

Thanks

[Tom]

Absolutely, you can do this:

@media (max-width: 768px) {
    .main-navigation.sticky-navigation-transition .site-logo img {
        height: 50px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Harris]

Thanks!

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Harris]

Hello,

The css provided resizes the logo in the Mobile sticky header but not in the normal mobile header.
I used this in order to achieve that.

Is that right or is there any better way to do it?

@media (max-width: 768px) {
	
	#mobile-header .inside-navigation .mobile-header-logo a img{
		height:70px !important;
	}
	.main-navigation.sticky-navigation-transition .site-logo img {
    height: 70px;
}
	
}

Thanks

[Author]

Posts