Archived topic
Header logo doesn't show up
6 replies · Started by Pamela on May 14, 2021
I have a logo set in the customizer that I would like to appear above the split menu, but it's not appearing.
When I built this site in January, I may have put some bad code in the custom CSS that is hiding it. (Originally I was trying to put the logo in the middle as in the Split demo, but it didn't work properly when resizing. So I think it can just sit above.)
I also tried building a header element with the logo in it, but that didn't show up either. So I've deleted that element.
I'll put my custom CSS in the next message.
/* GeneratePress Site CSS */ .nav-float-right .header-widget .widget {
padding-bottom: 0;
}
.site-branding,
.site-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 200;
}
button,
html input[type="button"], input[type="reset"], input[type="submit"], a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
border: 1px solid transparent;
}
button.ghost,
html input[type="button"].ghost, input[type="reset"].ghost, input[type="submit"].ghost, a.button.ghost,
a.button.ghost:visited,
a.wp-block-button__link.ghost:not(.has-background) {
background: transparent;
color: inherit;
border-color: inherit;
}
button.ghost:hover,
html input[type="button"].ghost:hover, input[type="reset"].ghost:hover, input[type="submit"].ghost:hover, a.button.ghost:hover,
a.wp-block-button__link.ghost:not(.has-background):hover {
background: transparent;
color: #1e73be;
}
.hero-buttons > * {
margin: 10px;
}
.widget-area .widget_search {
padding: 0;
}
.nav-links > * {
padding: 5px 15px;
border-width: 1px;
border-style: solid;
border-color: inherit;
}
#site-navigation {
float: none;
width: 100%;
}
.main-navigation .main-nav,
.main-navigation .menu-item-separator{
flex-grow: 1;
}
.main-navigation .menu-item-separator a {
font-size: 0;
background: transparent !important;
}
.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
display: none !important;
}
/*headings*/
.page-hero h1 {
font-size: 90px;
font-weight: 600;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
}
.page-hero h2 {
font-size: 40px;
font-weight: 600;
color: #FFFFFF;
text-shadow: 2px 2px #000000;
}
h3.hero-heading {
font-size: 30px;
font-weight: 600;
font-style: italic;
color: #f8dbb7
}
/* End GeneratePress Site CSS */Hi there,
i can see the Site Header but there is no Logo attached.
Can you confirm there is a logo in Customizer > Site Identity ? If there is can you remove it, publish the changes, and then re-add the logo.
Now that you mention it, that same trick may have fixed it for me once before on another site.
It's there now, but the menu text goes behind it at tablet resolution. Is there a way to set something like z-index to arrange the logo in the back?
Thanks!
Adjusting the z-index would still cause issues the site logo has a link that would be blocked by the menu - making it difficult for users to select a menu or the home link.
The simplest solution would be to have the Mobile nav appear on slightly larger screens, you can adjust the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation.
But if you want to maintain the desktop nav for as large a screen as possible then add this CSS:
@media(max-width: 1024px) and (min-width: 901px) {
.main-navigation .main-nav ul li:not(.menu-item-separator) a {
padding-left: 10px;
padding-right: 10px;
font-size: 17px;
}
}Then set the Mobile Menu Breakpoint to 900px.
It will slightly reduce the size of the menu items just before they're about to clash with the navigation.
Thanks! This is helpful.
You're welcome
