Centering Main for Desktop

[Rebecca]

Hello! Great plug-in, I really appreciate all the work that went into this to make it useable by such a large audience and to look so refined!

Is there a good way to center the menu items (meaning the entire list) for desktop instead of them aligning left? I set a width for .sm-clean and gave it margin: auto, but it seems like a nasty hack. I know if a user has a smaller desktop resolution but not small enough to qualify for the mobile menu version, some of the <li> items might drop. Is there a better approach? Thanks! My code:

@media (min-width: 768px) {

.sm-clean {
    width: 75%;
    max-width: 960px;
    margin: auto;
    background: RGB(197,53,28);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
  }

[admin]

Hi and sorry for this late reply! It’s been very hectic times here lately.

If it’s for the entire list, then you could use something like this:

@media (min-width: 768px) {
	nav {
		text-align: center;
	}
	#main-menu {
		display: inline-block;
		text-align: left;
	}
}

where nav is the menu list container element (it might be different in your layout but the sample code above should work on the demo page).

Cheers!

[Author]

Posts