How to center the header navigation menu text on Empire theme?

Technical Q&A
1

I want to center the text on the header menu and keep it within the constraints of the left and right vertical borders.

I tried this I saw from an older post, but to no avail:

.site-navigation .navmenu-depth-1{

width: 100%;
text-align: center;
}

Thank you.

2

Hello Jbtheslider,

The issue is not from the navigation but that’s how the template of the empire theme is. It has its search bar beside the logo and the menus under. The only solution is if you change the theme used in designing your store.

3

Fardey,

Thank you for the reply, but hmmm.

I can’t believe this can’t resolved by adding/editing code.

Thanks

4

If you decide to add or edit any code to it all the designs might be disformed on the phone view. Thats the embeded theme and if a code is added it works for only desktop view.

5

Hi @jbtheslider ,

Are you wanting this?

Screenshot.png
Screenshot.png1873Ă—295 119 KB

6

Hi @jbtheslider ,

Go to Assets > theme.css and paste this at the bottom of the file:

.site-header--full-width .site-navigation,
.site-navigation .navmenu-depth-1 {
	justify-content: center !important;
}

Hope it helps!

7

Hi @jbtheslider ,

Go to Assets > theme.css and paste this at the bottom of the file:

.site-header--full-width .site-navigation{
    padding-left: 10px !important;
    padding-right: 10px !important;
}
8

LitExtension,

“site-header–full-width .site-navigation{ padding-left: 10px !important; padding-right: 10px !important;” didn’t work.

The menu shifted left

Thanks

9

Hi @jbtheslider ,

I don’t understand, can you send me the screenshot with description on it, I will help you to check it

10

Hi @jbtheslider ,

Please go to theme.css file and remove code here:

Screenshot_30.png
Screenshot_30.png893Ă—366 18.4 KB

Then add the code here:

@media screen and (min-width: 1024px){
	.site-header--full-width .site-navigation {
		padding-left: 15px;
		padding-right: 15px;
	}
}
@media screen and (min-width: 720px) {
	.site-header--full-width .site-navigation {
		padding-left: 10px;
		padding-right: 10px;
	}
}
.site-header--full-width .site-navigation {
    max-width: 1600px;
    padding-left: 25px;
    padding-right: 25px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between !important;
}
.site-navigation .navmenu-depth-1 {
	justify-content: space-between !important;
    margin-left: 0 !important;
    width: 100%;
}
.site-navigation .navmenu-link-depth-1, 
.site-navigation .site-header-account-link a {
	padding: 12px !important;
}
.site-navigation .navmenu-item:first-child .navmenu-link-depth-1{
	padding-left: 0px !important;
}
.site-navigation .navmenu-item:last-child .navmenu-link-depth-1{
	padding-right: 0px !important;
}

Hope it helps!

1 Like
11

LitExtension,

It’s perfect! Thank you!

Have a few other things on the header, but will open another topic.

Thank you!

1 Like