Archived topic
Logo doesn´t appear in sticky navigation
5 replies · Started by Mårten on December 14, 2021
Hi!
I´m using this code to center logo in primary navigation.
@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
#site-navigation {
margin-left: unset !important;
display: flex;
}
.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}
#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(3) {
margin-left: auto;
}
}
The problem is that the logo doesnt´t appear in the sticky navigation.
Can you please help me to solve that problem?
Hi there,
can you share a link to your site ?
Thanks for quick reply.
Here is the site: https://kinnekullegarden.concil.nu/
In the CSS - this:
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}needs to change to:
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding,
.sticky-menu-logo .navigation-stick:not(#sticky-placeholder) .navigation-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}It works but now the logo is to high on the english part of the site: https://kinnekullegarden.concil.nu/en/start-2/
Do I need to change anything further in the code?
Thans for your help, David.
I think the English site is suffering from the lack of Menus - the menus are what give the header its height. Adding some menus should fix the problem.
