How to adjust full width menu header on Underground theme?

Store Design
1

Hi, i amusing Underground theme for our online store and i would like to as how can I adjust the header menu into full width? Sharing here screenshot of our menu header on desktop. As you can see, the other two is positioned below. Need to have one row for the menu header. Thanks!

nKadvMv_2022222_0-1649750835719.png
nKadvMv_2022222_0-1649750835719.png1594×163 16.8 KB

2

@nKadvMv_2022222 ,

Share the URL.

3

Hello @nKadvMv_2022222 ,

Please share your store URL and password of front view.
So that I will check and let you know the exact solution here.

Best regards.

4

here’s the link https://www.vmvhypoallergenics.com/

5

i can only provide the store link https://www.vmvhypoallergenics.com/

1 Like
6

@nKadvMv_2022222 ,

oscprofessional_0-1649759230220.png
oscprofessional_0-1649759230220.png1735×950 241 KB

7

Hello @nKadvMv_2022222

Greetings!!

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.Header__MainNav .HorizontalList--spacingExtraLoose .HorizontalList__Item {
   margin-right:15px;margin-left: 15px;
}
8

MY BAAAD, So sorry, the link is https://vmvhypoallergenics.ph/ - hope you can check it for me. Thanks!

1 Like
9

Hello @nKadvMv_2022222

Greetings!!

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.Header__MainNav .HorizontalList--spacingExtraLoose .HorizontalList__Item {
   margin-right:15px;margin-left: 15px;
}
10

@nKadvMv_2022222 ,

ul#main-nav li a {
    font-size: 13px;
    padding: 0 9px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->stylesheet.scss.liquid

11

Hi @nKadvMv_2022222 ,

you can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Asset → /stylesheet.css paste code below into end of the file.
#shopify-section-header ul#main-nav {
    width: 100% !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.