How can I adjust margins to keep my navigation bar on one line for smaller desktops?

Store Design
1

Hi there,

Currently, my navigation bar on desktops will go on two lines in stead of one line when the screen is smaller then 1485px (smaller desktops). There is enough space on both sides of the navigation but I think the margins are just very small. Do you now how to extend the margins on the left and right to provide space and show the navigation bar on one line for all desktops (from 1200px I guess)?

See website: https://www.biervaneigenbodem.nl/

Kind regards,

Wouter from Biervaneigenbodem

2

Hello @WoutervdMeer

It needs to modify your grid alignment on theme code

Techlyser_0-1648829515822.png
Techlyser_0-1648829515822.png1919×1029 476 KB

It will be available in header.liquid file of your theme.

3

Thank you very much for the quick response.

What do I need to change there?

4

Hello @WoutervdMeer
My pleasure.

like layout works with 12 grids and you see my red box you using one quarter css class it means it using 3 grid space.. so please find 2 grid class and replace here

5

Hello Techlyser,

I am not able to find the exact piece of code…

Do you have any idea on how to fix this?

6

Hello @WoutervdMeer

I just requested collaborator access please approve so i can check it for you

7

Hi @WoutervdMeer ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (min-width: 1024px) {
.site-header #AccessibleNav {
    width: 90% !important;
}
}

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

8

Hi @AvadaCommerce ,

Perfect, that works great.

I really appreciate it :slightly_smiling_face:

1 Like