How to align menu to far left in header Dawn Theme

Store Design
, ,
1

Hi Guys, I am clueless about how to move my menu list to the far left.

1.png
1.png2554Ă—133 39.5 KB

It looks like this right now and I wanna achieve this

2.png
2.png2560Ă—178 323 KB

Does anyone have any idea how to make it happen?
Please Help

Many thanks in advance.

2

You should check your menu list’s width, I assume that your whole page have a width but your menu might just have 60% of page width and it has center align. If not, could you provide your store link (include password if it has) so I can check your CSS code?

1 Like
3

Hi @D1k4ns , Thanks a lot for responding. Here’s my store link https://jewelorium.in/
Please check.

4

In your base.css file I found these code

@media screen and (min-width: 750px) {

.page-width {
   padding: 0 5rem;
  }
}

.page-width {
   max-width: var(--page-width); 
   margin: 0 auto; 
   padding: 0 1.5rem; 
}

When I disabled these, this is what I have, hope it is what you expected

D1k4ns_0-1680604271716.png
D1k4ns_0-1680604271716.png1879Ă—939 208 KB

5

@D1k4ns Hi this, is exactly what I wanna do, but not sure how can I disable them in the editor.
Could please share the steps on how can I do this? Thank you so much

6

Here the step:

  1. Go to your Shopify admin and click “Online Store” and then “Themes”.
  2. Click the “Actions” button for the theme you want to edit and select “Edit Code”.
  3. In the left-hand menu, click on “Assets” and then click on the “base.css” file to open it or search it in search bar in that menu.
  4. Press Ctrl + F in “base.css” file and search above codes and delete it (sorry when I said disable, I’m a developer and it’s my way to say delete something)
  5. You check your store again to see if it works or not

I suggest you check all your common page (product page, collection page, etc) to make sure when the codes deleted, other pages still be fine.

7

Hi, Tried deleting the code, but it changes my slideshow width too. Any other way I can do it without affecting the other codes?

8

Yes, in that same base.css file, you search this code

@media screen and (min-width: 990px){
.header {
   padding-top: 0px; 
   padding-bottom: 0px;
}

If you can’t find, just paste it at the final of the file and add this in .header

max-width: initial;

And you will have this, full width menu list but slideshow is still the same:

D1k4ns_0-1680606907258.png
D1k4ns_0-1680606907258.png1879Ă—939 307 KB

If you have many element have class header, you can hard detect menu list by replace .header to

.header.header--has-menu

The final code looks like this:

@media screen and (min-width: 990px){
.header.header--has-menu {
 padding-top: 0px; 
 padding-bottom: 0px;
 max-width: initial;
}
2 Likes
9

Thanks, a lot @D1k4ns

10

Hi @prathvijain

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.