How to align menu to far left in header Dawn Theme

[prathvijain]

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

It looks like this right now and I wanna achieve this


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

Many thanks in advance.

[D1k4ns]

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?

[prathvijain]

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

[D1k4ns]

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

[prathvijain]

@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

[D1k4ns]

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.

[prathvijain]

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

[D1k4ns · Accepted solution]

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:

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;
}

[prathvijain]

Thanks, a lot @D1k4ns 

[BSS-Commerce]

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.