I use Spotlight theme. My menu is now showing on two lines on a desktop even though it looks like there is plenty of space to stretch it out. How can I fix this? Here is a screenshot (store name has been blacked out).
Topic summary
A Shopify store owner using the Spotlight theme is experiencing a navigation menu display issue where menu items wrap onto two lines on desktop despite apparent available space.
Proposed Solution:
One community member suggested adding custom CSS code to the Theme Settings to increase the header width from the default 1200px to 1300px:
header {
--page-width: 1300px;
}
Alternative: If adding to Theme Settings doesn’t work, try adding the code to the Header section’s Custom CSS settings instead.
Status: Multiple users have requested the store URL and password to examine the issue directly and provide tailored solutions. The discussion remains open pending this information from the original poster.
1 Like
Hello @Dalma3
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.
Hi @Dalma3 ,
Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.
Your header width is restricted to match the rest of your site.
You may add the following code to the “Custom CSS” setting under “Theme Settings” to make it a bit wider so that menu fits on one line.
header {
--page-width: 1300px;
}
Change the the value to your taste, default is 1200px.
(You may try adding the code to “Custom CSS” settings of the “Header” section, but this may not work)
Hi @Dalma3 ,
Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?