Make navigation menu wider on Empire v12.2.1

[offroadjim]

Hi, I am trying to make the navigation dropdown menu wider on the Empire v12.2.1 theme so that the listings appear all on one line and not two lines. Any idea how I can do this?

Thank you

[Laza_Binaery]

Hi @offroadjim

Try to add this line in header or menu sections Custom CSS setting

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}

that should be enough

[theycallmemakka]

Hi @offroadjim

I have written custom code to get this done. To do this you will have to edit theme.liquid.

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the below code just above

<style>
.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[offroadjim]

@theycallmemakka

<style>
.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}
</style>

Hi Makka, I pasted this at the bottom of the assets > theme.css.liquid file but nothing changed. Is that the correct spot to paste it?

[offroadjim]

@Laza_Binaery

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}

Thank you that worked!

Is there a way to make the menu centered instead of to the left?

[Laza_Binaery]

@offroadjim

There is a way but I think it is look better left aligned, and you can reduce width if you need. To width of longest menu item.

But here is code:

.site-navigation .navmenu-depth-2 .navmenu-link {
    text-align: center;
}
.site-navigation .navmenu-basic__item .navmenu-link-parent, .site-navigation .navmenu-basic__item .navmenu-item-parent {
    text-align: center;
}

[offroadjim]

Thank you… Where do I paste this ?

[Laza_Binaery]

same place, in header or menu section in your theme customization, So choose, for example Header section and IN Custom CSS setting copy all the code

[offroadjim]

@Laza_Binaery

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}

That one did not work for some reason. I also tried removing the code for the width and just putting in the center code but still nothing

[Laza_Binaery]

Well, you can copy all to the end of theme.css you have on the screenshot, so just this

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}
.site-navigation .navmenu-depth-2 .navmenu-link {
    text-align: center;
}
.site-navigation .navmenu-basic__item .navmenu-link-parent, .site-navigation .navmenu-basic__item .navmenu-item-parent {
    text-align: center;
}

But remove that last code from the screenshot, it is completely wrong to use tag there.

[offroadjim]

@Laza_Binaery

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}
.site-navigation .navmenu-depth-2 .navmenu-link {
    text-align: center;
}
.site-navigation .navmenu-basic__item .navmenu-link-parent, .site-navigation .navmenu-basic__item .navmenu-item-parent {
    text-align: center;
}

Hi, I think I explained it wrong, and I see why you thought it looked better to the left!

I was trying to center the main menu to the header

[Laza_Binaery]

Ah my bad, sorry

Try this instead of those 3 rules

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}
.site-navigation {
    justify-content: center;
}

First rule just for the width of menu items and second for cenering main menu.

[offroadjim]

@Laza_Binaery

.site-navigation .navmenu-basic__item .navmenu-submenu {
    width: 360px;
}
.site-navigation {
    justify-content: center;
}

That did it… Thank you so much!