Archived topic
Home Page Header Problem - Menu Squish Logo
14 replies · Started by Stuart on November 12, 2020
Hello,
I tried following these two guides:
https://docs.generatepress.com/article/centering-logo-navigation/
https://docs.generatepress.com/article/header-element-overview/
However, this is what it currently looks like https://imgur.com/UJ3KbDW
The objective is to create a homepage similar to this site: owntheyard.com
Thank you.
Current CSS:
.inside-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header-widget {
order: 10;
overflow: visible;
}
.nav-float-right .header-widget {
top: auto;
}
.nav-float-right .header-widget .widget {
padding-bottom: 0;
}
.site-branding,
.site-logo {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 200;
}
#mobile-header .mobile-bar-items {
-webkit-box-ordinal-group: 5;
-ms-flex-order: 4;
order: 4;
margin-left: auto;
}
#site-navigation {
float: none;
width: 100%;
}
.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.main-navigation .menu-item-separator {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
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;
}
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
}Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hi Leo,
Thanks for reply. It's a staging site so hope this works.
Hi Leo, I think I replied incorrectly.
Just following up as it's a staging site, included login.
Hi there,
how will you want this laid out on Mobile Devices ? So i can provide you some CSS to correct the above issue as well as create the mobile layout.
Hi David,
Thanks for your reply. Just the logo and hamburger to the left is fine for mobile.
*The hamburger and logo still overtop of dog image would be great if possible
I'm not seeing a menu-item-separator added for a menu item as instructed here:
https://docs.generatepress.com/article/centering-logo-navigation/
Can you make sure it's added in?
Let me know :)
Hi Leo,
There is one added, however, unlike the instructions here: https://docs.generatepress.com/article/centering-logo-navigation/ when I add a custom link I am given no option to add the CSS Classes (Optional) box.
In the two pictures here I show that when I add that to the name it just adds menu-item-separator in the middle of the header: https://imgur.com/a/VirA4xs
Perhaps I've missed something when added?
Thanks
when I add a custom link I am given no option to add the CSS Classes (Optional) box.
Can you click the CSS class link in step #5 here and see if that helps?
https://docs.generatepress.com/article/centering-logo-navigation/#using-the-header
It worked! Thanks Leo, totally missed the prompt for setting up css class.
Seems to be separating a bit, where abouts in the code can I change numbers to get the logo centered and spaced better, looks a little janky at the moment.
Try adding this CSS as well:
.main-navigation .main-nav {
flex: 1;
}Perfect Leo, I did flex: .6 worked great.
I think I will be redoing logo to fit better soon.
Is their code to make the header text a larger size, couldn't see in menu customize options.
Any chance you can open a new topic for the separate question so we can tackle one question per topic?
Thanks :)
Ok will do, David had replied about css for mobile header, just checked and mobile header becomes pretty squished. I like the layout on owntheyard.com for mobile -> logo on left, hamburger on right.
Can you please open a new topic for the mobile header question as well?
It's much easier for us to track the issue that way.
Thank you.
