[Resolved] Fixing width between elelemnts in Nav

Hi John,

I have noticed that it does not seem balanced on either site of the logo in the center.
So the 3 cloud/menu items on the right-hand side are closer to the logo.
And there seems to be a slightly bigger gap between those 3 clouds than the 3 on the left-hand side.

The right side is closer to the logo because it occupies more horizontal space. This is the case because the menu items on the right side have more characters than the menu items on the left side.

It’s quite tricky to evenly distribute as the HTML structure is not conducive to evenly distributing the menu item elements because we’re simply forcing the logo to the center of the header with CSS position absolute rather than having it structured in an actual split menu structure. While we can try to salvage the current layout by putting margin-left value on the first menu item, it’s going to be tricky to figure out the best value for all viewport.

The alternative to properly distribute this will be quite tedious because this will require you to modify how the header is laid out.

If you’re willing to consider it, try something like what I provided here – https://generatepress.com/forums/topic/split-menus-into-two-separate-lists/#post-1519913

Which, to put simply, is creating 2 menu places in between the logo and then style it in a column-like manner with equal columns for both left and right menu (example: 40% left -20% logo – 40% right or 33.33% left – 33.33% logo – 33.33% right ).

We then set the left column to “align-right” and set the right column to “align-left” so the menu item’s distance from the logo will be always equal regardless of the screen size.

Hi there,

can you provide a login so i can get past the coming soon page.

Am i looking at the right site ? As i am seeing A LOT more menu items, all the ones with the cloud background are to the left of the logo, and there is a separate menu to the right ( Without clouds )

The next step would be to split the menu items into 2 menus.

3 menu items to the left, 3 to the right.

We then style it with CSS:

Before adding this, make sure you remove the CSS styling that absolute positions the logo.

It’s this CSS:

@media(min-width: 1025px) {
.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;
}

And then add something like this:

@media(min-width:1025px){
    nav#site-navigation { /* hide the primary menu */
        display: none;
    }
    .inside-header.grid-container { /* center the items */
        margin: 0 auto;
    }

    .menu-left-container,.menu-right-container { /* width of left and right menu */
        width: 40%;
    }

    .site-logo{ /* width of logo */
        width: 20% ;
    }

    .menu-left-container ul.menu { /* alignment of left menu */
        justify-content:flex-end;
    }

    .menu-right-container ul.menu { /* alignment of right menu */
        justify-content: flex-start;
    }
}

This will be the expected result – https://share.getcloudapp.com/9ZudA6vn

In this image, you can see that the distance between g of Blog on the left-side and the B of the Book on the right-side is equal.

You then re-add the cloud backgrounds.

These would be the selectors but I’m not sure what’s the whole CSS involved for the alignment, etc. Adjust to your preference. 🙂

@media (min-width: 1025px){
    ul#menu-left>li,
    ul#menu-right>li{
        position: relative;
        padding-left: 43px;
        padding-right: 43px;
        line-height: 70px;
    }
	ul#menu-left>li:first-child:before,
	ul#menu-right>li:first-child:before {
	    content: '';
		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-11.png);
	    position: absolute;
		top: 45%;
		left: 55%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
		height: 100%;
		display: block;
	}

	ul#menu-left>li:before,
	ul#menu-right>li:before
	{
		content: '';
		position: absolute;
		top: 45%;
		left: 55%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
		height: 100%;
		display: block;
		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-31.png);
		background-size: contain;
		background-repeat: no-repeat;
		z-index: -1;
	}
}

Try this out.

@media (min-width: 1025px){
ul.menu li {
    list-style: none;
}

ul.menu li:hover ul.sub-menu{
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    opacity: 1;
    transition-delay: 150ms;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

ul.menu li ul.sub-menu {
    display: none;
}

ul.menu li ul.sub-menu li {
    line-height: 1.5;
    margin: 20px;
}
}

See it in action here – https://share.getcloudapp.com/nOuPNyA7

For #1:

The CSS should’ve been enough unless you didn’t remove the CSS that turns the logo position: absolute;. I believe I’m mentioned that on my reply here – https://generatepress.com/forums/topic/fixing-width-between-elelemnts-in-nav/#post-1815551

It also won’t look equal if your cloud BGs are not evenly sized.

For #2:

Sure. Remove the padding on this CSS:

    ul#menu-left>li,
    ul#menu-right>li{
        position: relative;
        padding-left: 43px;
        padding-right: 43px;
        line-height: 70px;
    }

And then add this CSS:

ul#menu-left>li a, ul#menu-right>li a {
    padding: 0 43px;
}

For #3:

We can add margin to the sub menu items.

ul.menu ul.sub-menu li {
    margin-bottom: 20px;
}

But if you want it to be exactly the same as the main site, use padding:

ul.menu ul.sub-menu li {
    padding: 15px;
}

It’s quite difficult to keep track of things when the CSS seemed too convoluted to follow.

That said, can you remove everything we’ve added so far, including the margins of each of the menu items?

You then add this:

@media(min-width:1025px){
	.menu-item-673 { /* About */
	transform: translateY(-50%);
	}
	.menu-item-674 { /* Blog */
		transform: translateY(50%);
	}
	.menu-item-676 { /* Book */
		transform: translateY(0%);
	}
	.menu-item-677 { /* Resources */
		transform: translateY(50%);
	}
	 .menu-item-678 { /* Contact*/
		transform: translateY(-50%);
    }

    nav#site-navigation { /* hide the primary menu */
        display: none;
    }
    .inside-header.grid-container { /* center the items */
        margin: 0 auto;
    }

    .menu-left-container,.menu-right-container { /* width of left and right menu */
        width: 40%;
    }

    .site-logo{ /* width of logo */
        width: 20%;
        text-align: center;
        margin: 0 30px
    }

    ul.menu { /* alignment of menu */
        justify-content: space-between;
        display: flex;
        flex-direction: row;
        margin: 0;
    }

	ul#menu-left>li:first-child:before,
	ul#menu-right>li:first-child:before {
	    content: '';
		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-11.png);
	    position: absolute;
		top: 45%;
		left: 55%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
		height: 100%;
		display: block;
	}

	ul#menu-left>li:before,
	ul#menu-right>li:before
	{
		content: '';
		position: absolute;
		top: 45%;
		left: 55%;
		transform: translate3d(-50%, -50%, 0);
		width: 100%;
		height: 100%;
		display: block;
		background-image: url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://wordpress-537289-1976741.cloudwaysapps.com/wp-content/uploads/2021/05/Cloud-31.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		z-index: -1;
	}

	ul.menu li {
		list-style: none;
		position: relative;
        line-height: 2;
        padding:  20px;
	}

	ul.menu li:hover ul.sub-menu{
		position: absolute;
		display: block;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		opacity: 1;
		transition-delay: 150ms;
		pointer-events: auto;
		height: auto;
		overflow: visible;
	}

	ul.menu li ul.sub-menu {
		display: none;
	}

	ul.menu li ul.sub-menu li {
		line-height: 1.5;
		margin: 20px;
	}
}

I’ve basically removed everything and recompiled/rechecked/rewrap everything again in 1 @media wrap.

Here’s the result assuming you’ve properly removed everything and re-added this CSS –
https://share.getcloudapp.com/X6uAO6dJ