Navigation on Empire Theme

Store Design
, ,
1

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:

Kreeveyates_0-1737108487638.png
Kreeveyates_0-1737108487638.png1605×262 40.7 KB

Site: https://ashbrookroofing.co.uk

2

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

153.png
153.png1913×429 60.6 KB

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

3

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:

websensepro_0-1737110016761.png
websensepro_0-1737110016761.png1349×510 60.7 KB

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! :rocket: (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!