Navigation on Empire Theme

[Kreeveyates]

Hello,

I am wanting to make only the navigation bar the full width on the page and to stay like that even when the zoom is changed on the browser.

Current is below:

Site: https://ashbrookroofing.co.uk

[Rahul_dhiman]

Hello @Kreeveyates 
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

#shopify-section-sections--21349253775653__header nav {
width: 100% !important;
max-width: 100% !important;
}

Result

If this was helpful, hit the like button and accept the solution.
Thanks

[websensepro]

Hi @Kreeveyates 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:1024px){
ul.navmenu.navmenu-depth-1 {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-left: 0 !important;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!