- This topic has 17 replies, 2 voices, and was last updated 4 years, 9 months ago by Leo.
-
AuthorPosts
-
June 24, 2019 at 8:20 am #939675Nimie
I am trying to recreate the nav logo that is on the link. The settings are different now after update and I am not having any luck. I have set it to use navigation as header but the logo is not floating off the menu.I have also included the link to the new site.
June 24, 2019 at 11:45 am #939855LeoStaffCustomer SupportHi there,
Give this CSS a shot:
.site-logo { position: absolute; left: 0; top: 0; z-index: 999; } .navigation-branding img { height: 100px; }
Adding CSS: https://docs.generatepress.com/article/adding-css/
June 24, 2019 at 12:47 pm #939893NimiePerfect thanks!
June 24, 2019 at 12:47 pm #939895LeoStaffCustomer SupportNo problem 🙂
June 24, 2019 at 1:57 pm #939933NimieIs there a way to keep it from shrinking down so small? In the example site the logo remains larger and floats off the nav bar.
June 24, 2019 at 1:59 pm #939938LeoStaffCustomer SupportDo you have a sticky navigation logo uploaded?
If it’s the same as the static logo, can you remove that first?
Let me know 🙂
June 24, 2019 at 2:04 pm #939939NimieI removed the sticky nav logo
June 24, 2019 at 2:12 pm #939943LeoStaffCustomer SupportAdd this CSS as well:
@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) { .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img { height: 200px; } }
June 24, 2019 at 2:21 pm #939948NimieThat didn’t do it. Now the logo is small until you scroll and then it grows.
June 24, 2019 at 2:29 pm #939954NimieWait It is working just not with the editor open. Then it has the opposite features. Bizarre, but thanks for the quick turn around. How do we adjust for tablet and mobile view?
June 24, 2019 at 2:43 pm #939964NimieI was able to resize for tablet and mobile but am not able to add left padding.
June 24, 2019 at 3:01 pm #939973LeoStaffCustomer SupportTablet breakpoint is
@media (max-width: 1024px) and (min-width: 769px)
so you can do this:@media (max-width: 1024px) and (min-width: 769px) { .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img { padding-left: 10px; } }
June 24, 2019 at 3:43 pm #939992NimieNow nothing is working correctly. Here is what I have
.site-logo {
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
.navigation-branding img {
height: 200px;
}
@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
height: 200px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img {
padding-left: 10px;
}
}
}June 24, 2019 at 3:51 pm #939994NimieIf I use this it works great for mobile but the desktop logo no longer works.
@media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
.site-logo {
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
.navigation-branding img {
height: 200px;
}
.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
height: 100px;
}
}
@media (max-width: 769px){.site-logo
{position: absolute;
padding-left: 10;
top: 0;
z-index: 999;
}
.navigation-branding img {
height: 100px;
padding-left: 10px;
}
@media (max-width: 769px) {
.main-navigation.sticky-navigation-transition .site-logo img,
.main-navigation.sticky-navigation-transition .navigation-branding img {
height: 70px; padding-left: 10px;
}
}
}
}June 24, 2019 at 3:53 pm #939996LeoStaffCustomer SupportI’m a bit confused what the desired outcome is.
Do you want the logo to resize in sticky navigation?
Is the padding only required on tablet? Is it for moving the logo to the right?
-
AuthorPosts
- You must be logged in to reply to this topic.