Mai Lifestyle – Center Primary Menu

[Rosesilk]

Hello,

I am using the Mai Lifestyle theme. I would like the Primary menu to be centered (this is the menu that is black in the demo. It says "WELLNESS, RECIPES, BREAKFAST, LUNCH, ENTREES, and SIDES)

Is there a way to get the menu items to center on the page?

My site is in a staging area so I can't share a link. Here is a link to the demo site: https://my.studiopress.com/themes/mai-lifestyle/#demo-full

Thank you!

https://my.studiopress.com/themes/mai-lifestyle/#demo-full

[Brad Dalton]

Center the entire menu, not the items.

Try text-align:center https://www.w3schools.com/cssref/pr_text_text-align.asp

---

Tutorials for StudioPress Themes.

[Rosesilk]

Hi braddalton,

Thank you for your response. I don't know how to center the entire menu. I have tried every way I can think of to use text-align but I can't get it to work. It's likely that I'm not using the right classes but I don't know how to make it right.

Thank you,
Julia

[joey]

I was able to sort of center the demo menu by adding a margin left to the header what is does is spread out the menu items.. so it seems more centered..
I think than the idea is you use the inspector on your browser like I did to just experiment with margins and maybe padding but text align is not effective under any of the css so far as I saw..again I just used the web inspector and tried different codes see below as the one that I saw worked best more or less.. anyway just looking around here and I did deploy this theme so I wanted to take a look..

.genesis-nav-menu .menu-item {

margin-left: 60px; -------This is the one I added
position: relative;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex: 0 0 auto;
-webkit-box-flex: 0;
flex: 0 0 auto
}

[Rosesilk]

Wow! Thank you, Joey. I'll try this out.

I really appreciate your help.

Julia

[JiveDig]

Hi Rosesilk,

Sorry I missed this. We use flexbox for our menus so you can center it like this:

.nav-primary .menu {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

---

Lead developer of Mai Theme

[Rosesilk]

Thank you! I appreciate the help. I'll add that this weekend.

Julia

[Author]

Posts