Archived topic
Floating logo and floating sticky logo
17 replies · Started by Harris on December 18, 2020
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;
}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 :)
Edit: Found it. It's in the bottom. Blind! :)
Hello,
For some reason this option does not exist
https://i.gyazo.com/115deab39027b7f0f45cf1742d60777b.png
Still doesn't seem to be working though....
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
Hi there,
can you share a link to your site where i can see the issue?
Sure. I had shared one in the initial post (private info).
I am adding it here too
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;
}Thanks Tom!
Should I remove this CSS in the next release?
You can remove this block of CSS only in the next release:
.main-navigation.sticky-navigation-transition .menu-bar-item > a {
line-height: 65px;
}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
Absolutely, you can do this:
@media (max-width: 768px) {
.main-navigation.sticky-navigation-transition .site-logo img {
height: 50px;
}
}Thanks!
No problem :)
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
