- This topic has 13 replies, 2 voices, and was last updated 3 years, 7 months ago by Leo.
-
AuthorPosts
-
August 17, 2020 at 10:37 am #1406613Nimie
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.
August 17, 2020 at 10:40 am #1406619LeoStaffCustomer SupportHi 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 π
August 17, 2020 at 11:10 am #1406669August 17, 2020 at 4:22 pm #1406936LeoStaffCustomer SupportTry 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; }
August 18, 2020 at 9:57 am #1408093NimieUsed code. Didn’t change anything.
August 18, 2020 at 10:25 am #1408132LeoStaffCustomer SupportI’m not seeing the code being added.
It works when I tested with the browser inspector tool:
https://www.screencast.com/t/aqoosrGIRRAugust 18, 2020 at 10:35 am #1408150NimieJust 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.
August 18, 2020 at 10:58 am #1408170LeoStaffCustomer SupportCaught a syntax error in my code above.
Try again:
https://generatepress.com/forums/topic/static-and-sticky-navigation-logo/#post-1406936August 18, 2020 at 11:13 am #1408184NimiePesky 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;
}August 18, 2020 at 11:16 am #1408186LeoStaffCustomer SupportIs 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 π
August 18, 2020 at 11:26 am #1408197NimieAhhh that did it. If I want the logo to shrink slightly?
August 18, 2020 at 11:40 am #1408219LeoStaffCustomer SupportAdd this CSS:
.main-navigation.navigation-stick .navigation-branding .site-logo img { height: 120px; }
August 18, 2020 at 11:42 am #1408221NimiePerfect, as always you guys rock the customer service. Thanks for your help.
August 18, 2020 at 12:01 pm #1408241LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- You must be logged in to reply to this topic.