Mobile Main Navigation Menu

Hi Vlad,

I am trying to align to center the navigation menu on my mobile.
It’s funny because the main navigation menu is centered on my iPhone 5s however when I turn screen to landscape the navigation menu button aligns right. On iPhone 6 navigation menu aligns on right even in portrait mode.

I am trying to change it by adding this css:

@media screen and (min-width: 992px) {
.main-navigation {
  width: 100%;
  }
.main-navigation ul {
     text-align: center;
     float: none;
  }
}

It does not work :frowning: COuld you help please?

Hey,

Yeap, because it’s centering at widths =< 320px, which is iphone 5s in portrait mode. Change min with max in your code and it should work.

Hello Vlad,

It does not work - I have tried to change from min to max from 320 to 992 to 1024 and nothing. The mobile in landscape stil positiones navigation menu button on right.

@media screen and (max-width: 992px) {
.main-navigation {
  width: 100%;
  }
.main-navigation ul {
     text-align: center;
     float: none;
  }
}

What I am doing wron? Could it be because there already is the code for centering menu on pc?

.main-navigation {
  width: 100%;
}
.main-navigation ul {
     text-align: center;
     float: none;
}
.main-navigation li {
     float: none;
     display: inline-block;
}

What do you think? Is there any help please?

Thank you very much.

Sorry, use this:


@media screen and (max-width: 992px) {
	.menu-toggle.btn {
		margin: 5px auto 10px;
		float: none;
	}
}

Like a BOSS. Thank you now it’s OK.