[Resolved] Centre Mobile Navigation Logo

[Jefri]

Hello,

Two things:

1. On the mobile version of the website, the navigation logo (sticky) is sliding to the left and not center aligned. How do I fix this?

2. When I flip my galaxy s9 phone sideways the hamburger menu disappears and I get a two line primary navigation. How do I make it such that the navigation does not do this?

My current settings is nav location above header, navigation alignment centre, and navigation logo sticky+static.

My current CSS:

/*
.menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
    width: 100%;
    float: none;
}

#generate-slideout-menu {
    width: 170px;
	background-color: #000;
}

.main-navigation.navigation-stick {
    background-color: #000;
 	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;

	}

.menu-toggle {
	padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
	margin-top: -30px;
	margin-bottom: 0px

}
@media screen and (min-width: 800px) {
  
.main-navigation .nav-button a {
	border: 2px solid #ffd800;
    border-radius: 5px;
    background-color: #ffd800;
	
}

}

*/

Thank you.

[Leo]

Hi there,

Can you first <!--Comment out your current CSS--> like this and let me have another look?

Thanks 🙂

[Jefri]

Hi Leo,

Think I did it.
Is that fine?

[Leo]

Oops sorry my bad. Wrong notation.

This is how to comment out CSS:

/*
CSS in here will be commented out
*/

[Jefri]

Hi Leo,

I tried this..not sure if this is what you were after.

[Leo]

Thanks 🙂

Have you considered using the mobile header feature?
https://docs.generatepress.com/article/mobile-header/

I think it would look good with your set up.

You can also change the breakpoint higher to solve issue #2.

Let me know 🙂

[Jefri]

Thanks ! Works great.

[Leo]

No problem 🙂

[Author]

Posts