Archived topic
Static and Sticky Navigation logo
13 replies · Started by Nimie on August 17, 2020
I am looking to create a static and sticky nav logo. I did this on a site while back but now all the options in GP have changed and I have to use the nav as header option. I am stuck trying to achieve the same look. I m attaching the link to the site that has what I am looking to achieve.
Hi there,
The navigation as a header option should work still - we just need to adjust some CSS.
Can you link me to the site you are currently working on?
Let me know :)
Try this CSS:
.main-navigation .navigation-branding .site-logo {
position: absolute;
left: 0;
top: 0;
z-index: 99;
}
.main-navigation .navigation-branding .site-logo img {
height: 200px;
}Used code. Didn't change anything.
I'm not seeing the code being added.
It works when I tested with the browser inspector tool:
https://www.screencast.com/t/aqoosrGIRR
Just went back refreshed, readded, refreshed. NO change and the code was there. There should be no conflicts or cache. I agree the code should work. I tried a different browser and a different internet connection to avoid modem cache.
Caught a syntax error in my code above.
Try again:
https://generatepress.com/forums/topic/static-and-sticky-navigation-logo/#post-1406936
Pesky period. That is close to what I want. On the example site the logo still floats off the nav when scrolling. It shrinks somewhat but still is larger than the nav. This is what was used on that site:
@media (min-width: 769px){
.main-navigation .sticky-logo {
position: absolute;
top: 0px;
left: 0;
z-index: 100;
}
.main-navigation.navigation-stick .site-logo {
top: 0;
}
body .main-navigation:not(.navigation-stick) .sticky-logo,
body .main-navigation:not(.navigation-stick) .sticky-logo img {
height: 250px;
}
body .main-navigation.navigation-stick .sticky-logo,
body .main-navigation.navigation-stick .sticky-logo img {
height: 100px;
}
}
@media (max-width: 769px){
.main-navigation .sticky-logo {
position: absolute;
top: -10px;
left: 0;
z-index: 90;
}
.main-navigation:not(.navigation-stick) .sticky-logo,
body .main-navigation:not(.navigation-stick) .sticky-logo img {
height: 100px;
}
Is the sticky navigation logo the same as the static logo?
If so can you actually remove that first? Shouldn't need to add it twice.
Then I can tweak the CSS.
Let me know :)
Ahhh that did it. If I want the logo to shrink slightly?
Add this CSS:
.main-navigation.navigation-stick .navigation-branding .site-logo img {
height: 120px;
}Perfect, as always you guys rock the customer service. Thanks for your help.
No problem :)
