Menu design Adjustments

8 0 4

Hello everyone,

I achieved the below menu with this code:

ul.list-menu.list-menu--inline li {
padding: 0px 50px 0px 50px;
ul.list-menu.list-menu--inline li:hover {
background: #FCFAFA;
ul.list-menu.list-menu--inline li:active {
background: #E8E8E8;
.header__active-menu-item {
text-decoration: none;
.header__active-menu-item:hover {
text-decoration: none;
.header__menu-item:hover span {
text-decoration: none;
.header {padding-bottom: 0px !important}


Screenshot 2023-10-04 221912.png

However what I'm struggling with is to have an even rectangle width for each button, rather than relative to the length of the text. the size of the middle button titled "Catalouge" is 215 x 42.19 and I'd like to apply that to all the rest.

As well as shift the menu slightly so the catalouge aligns with the middle point of the logo.


Any suggestions? is this doable?






Replies 2 (2)
605 123 123

Hi @Kulike96 

This is David at SalesHunterThemes.
Just checked your store and found that you have added custom code to make the menu items have the same width.
Anything else need to help?

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

Shopify Partner
15736 2353 3051

Hello @Kulike96 

Please clarify to us what you want to remove and what you want to adjust. 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing