Issue: Navigation menu stacks differently on the live homepage compared to the theme editor (Customize). Affects only the front page on a legacy Dawn theme. Screenshots were provided to illustrate the discrepancy.
Investigation: A helper requested the store URL and reviewed the site. They suggested editing the theme CSS to change the .container display from flex to block to adjust the menu layout, providing step-by-step instructions via Edit Code.
Findings: Changing the global .container to block fixed the header stacking but broke other flex layouts. The issue required targeting the header-specific container instead of the global class.
Outcome: The original poster identified the correct header .container and implemented the fix without affecting other elements.
Status: Resolved. No further action requested; solution was a CSS adjustment scoped specifically to the header container on the homepage.
I’m not entirely sure what’s changed to have this occur. The menu used to look like this:
and still does in the “customise section” but when it’s actually live it looks like this:
any clue what causes this. I do have a few sections of custom code but nothing in regard to the header.
It’s using a legacy dawn theme from my best understanding
Any help would be fantastic.
can you provide url to the store
I’ve actually checked now and it’s only on the front page that this is occurring so it’s quite odd.
Hello @ChloeB1 ,
I understand that you are looking to change the display layout of your navigation menu similar to this https://prnt.sc/N53ZGj3hrOtI
I have looked through your store https://www.begenki.com.au and see the code associated with this section.
You can change the display of the navigation menu by making some changes in your .css file.
Please follow the below mentioned steps -:
Go to Online Store , Themes and then click three dots https://prnt.sc/73wWs7DQl-i_
Next Click on ‘Edit Code’ https://prnt.sc/zkDDdKVZ_7cd and find .css file (base.css, style.css, theme.css)
Next, find the ’ .container ’ div class tag in css file and change the display from ‘flex’ to ‘block’
.container {
position: relative;
margin: 0 auto;
display: block;
}
After changes output will be like this https://prnt.sc/jflE3iZbSfAE
I hope the solution helps you.
Please let me know if you have any query.
Thank you.
Anshul this does work for the top but it then makes all the other items no longer flex. I probably need to find the exact container for the top section.
Hello @ChloeB1 ,
I see you have made changes in your site navigation menu.
As I believe you have found the exact .container of the header section and fixed the issue.
Kindly confirm.
If you need any further assistance. Please let me know.
Thank you.
Yes, I successfully found it.
Thank you anshul!!!
