Dawn theme Menu Bar width size for Desktop & mobile

Store Design
1

Hi all,

I hope you can help a novice to coding made an update to the dawn theme.

I have migrated across to the theme and I am trying to get the menu bar on Desktop and mobile size correctly.

Desktop: the menu is squashed and puts a menu item on second row

Mobile: this is squashed and does not use the full width of the screen

In grabbing some code from pervious query it is clear a one size does not suit all. Using the below code, this works for fixing the mobile view but on desktop the menu is far to wide:

.header{width: 70%;max-width: 70%;}

Any help is really appreciated?

Thanks SJ

1 Like
2

Hello There,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

Thank you!

3

Hi @SDog ,

Kindly share your store url, so that we can check and provide you the solution.

4

Hi,

Thanks for responding. The URL is: minnieandminty.com

Regards SJ

5

Hi,

Store URL is: minnieandminty.com

Regards SJ

6

Add this CSS code Online Store > Themes > Edit code > Assets > custom.css or theme.css

.header {
    width: 100%;
    max-width: 100%;
}
7

Thank you for your response.

I have previously added this code to my base.css folder and it did not work. As mentioned above this solves the mobile view but makes the header in desktop far to wide.

8

Try this code

.header {
    width: 100% !important;
    max-width: 100% !important;
}