[Resolved] How can I place the logo in the middle of the menu

[Hernan]

Hi, I want to place the logo in the middle of the main menu, but I can’t find the way from the editor.
Could you guide me?

Example menu

sec1 sec2 sec3 LOGO sec 4 sec 5 sec 6

Thank you

[David]

Hi there,

this document explains how to do that:

https://docs.generatepress.com/article/centering-logo-navigation/

[Hernan]

thanks, it was very helpful

[David]

You’re welcome

[Hernan]

A very good resolution.
in responsive mode now
=menu logo

sec1
sec 2
sec3
logo
sec 4
sec5
sec6

and I would like to have it that way

logo = menu

sec1
sec2
sec3
sec4
sec5
sec5

[David]

Can you share a link to your site so i can provide the CSS fix?
You can edit your original topic and add the link to the Site URL field.

[Hernan]

I already edited

[David]

Ok so we need to make some changes to the CSS.

Replace this:

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
    z-index: 200; 
}

with:

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
    z-index: 200; 
    top: 0; /* Include this property */
}

And replace this:

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}

with:

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .main-nav li.menu-item-separator{
	display: none !important;
}

Then add this CSS to move the =menu toggle to right hand side:

#mobile-header .inside-navigation {
    justify-content: flex-end;   
}

[Hernan]

Thank you !!!!

have a nice day

[David]

You’re welcome – and you too !

[Author]

Posts