[Resolved] Home Page Header Problem – Menu Squish Logo

[Stuart]

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;
        }
}

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Stuart]

Hi Leo,

Thanks for reply. It’s a staging site so hope this works.

[Stuart]

Hi Leo, I think I replied incorrectly.

Just following up as it’s a staging site, included login.

[David]

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.

[Stuart]

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

[Leo]

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 🙂

[Stuart]

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

[Leo]

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

[Stuart]

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.

[Leo]

Try adding this CSS as well:

.main-navigation .main-nav {
    flex: 1;
}

[Stuart]

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.

[Leo]

Any chance you can open a new topic for the separate question so we can tackle one question per topic?

Thanks 🙂

[Stuart]

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.

[Leo]

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.

[Author]

Posts