Desktop Navigation Menu Not Showing Entirely

Shopify Discussion
1

Hello Everyone

The desktop version of the nav bar menu has a problem where it displays only up to four menu items. The remaining items appear in a dropdown next to these four items, indicated by “3 dots.” A screenshot is attached for reference.

m8bmir_0-1691565856620.png

website is : https://aguilaactivewear.com/

I’m seeking a solution to present all nav bar items in a single line on the desktop view, eliminating the dropdown appearance. Your assistance in this matter would be greatly appreciated.

Thank you

2

Hey @m8bmir

The following css will solve the problme.

.header-2 .header-middle__left {
    width: 130px !important;
}
.header-2 .header-middle__center {
    width: calc(100% ) !important;
}
.header-2 .header-middle__right {
    width: 162px !important;
}

Aguila Activewear & Gymwear_ Online Shopping Brand in Pakistan – Aguila ActiveWear.png
Aguila Activewear & Gymwear_ Online Shopping Brand in Pakistan – Aguila ActiveWear.png1903×613 154 KB

Please note that since I have no access to the code, I only performed an inspection. It’s essential to apply this CSS to a duplicate theme first, then preview the theme. If everything looks fine, you can publish the theme. I never recommend making any changes to the live theme.

Thanks

1 Like
3

Thank you for your response, I will add this code in the duplicate theme, can you tell me which section I should add this code to?

4

You can add this in the header section.

custom css.png
custom css.png405×265 9.95 KB

1 Like
5

added in the header section, didn’t work

6

it should work. can you share the theme preview in which you applied it?

1 Like
7

m8bmir_1-1691576700423.png
m8bmir_1-1691576700423.png1323×662 255 KB

8 
.header-2 .header-middle__left {
    width: 130px !important;
}
.header-2 .header-middle__center {
    width: 100%!important;
}
.header-2 .header-middle__right {
    width: 162px !important;
}

Sorry, there was a mistake in my previous css please try this

1 Like
9

Still didn’t work, maybe you are using a wide-screen monitor , that’s why it’s working for you, but not for me

10

Sorry to see that it’s not working.
I check on a normal laptop screen and even i resize the screen. attached is a screen recording.
https://www.awesomescreenshot.com/video/19804450?key=b02bcdc5191c020fa2f77b3ee7217a0d

1 Like
11

Thank you for your responses and effort, I’ll try again.

1 Like
12

It sounds like you’re working with the Craft theme and trying to add a custom line item property to a product template. However, it seems like your message got cut off at the end. Could you please provide more details or let me know what specific assistance you’re looking for? Are you encountering any issues or do you need guidance on a particular aspect of this task? The more information you provide, the better I can assist you.