Desktop Navigation Menu Not Showing Entirely

Solved

Desktop Navigation Menu Not Showing Entirely

m8bmir
Shopify Partner
15 0 5

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

Accepted Solution (1)
azamgill
Shopify Partner
325 47 77

This is an accepted solution.

.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 

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify

View solution in original post

Replies 11 (11)

azamgill
Shopify Partner
325 47 77

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

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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
m8bmir
Shopify Partner
15 0 5

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?

azamgill
Shopify Partner
325 47 77

You can add this in the header section. 

custom css.png

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
m8bmir
Shopify Partner
15 0 5

added in the header section, didn't work

azamgill
Shopify Partner
325 47 77

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

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
m8bmir
Shopify Partner
15 0 5

m8bmir_1-1691576700423.png

 

 

azamgill
Shopify Partner
325 47 77

This is an accepted solution.

.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 

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
m8bmir
Shopify Partner
15 0 5

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

azamgill
Shopify Partner
325 47 77

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 

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify
m8bmir
Shopify Partner
15 0 5

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

TOUSEEF877
Visitor
2 0 0

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.