How to move logo to the left in Dawn? And color my navigation menu

Solved

How to move logo to the left in Dawn? And color my navigation menu

back2natureheal
New Member
6 0 2

I am currently using the Dawn theme. My nav is center and I want to move my logo fully to the left.

I would also like to color the background of my navigation menu, with no spaces on either side of it (full color).

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6827 1629 2007

This is an accepted solution.

Do you mean like this? 

Made4uoRibe_0-1720561193280.png

If it's not would you mind provide some sample designs. I used this code. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-columns: 1fr auto 1fr;
    }
    nav.header__inline-menu {
        grid-area: 2/ span 3;
        text-align: center;
        background: green;
}
    .header__icons.header__icons--localization.header-localization {
        grid-area: 1/3;
}
    .header__active-menu-item, .header__menu-item {
        color: white;;
}
    .header:not(.drawer-menu).page-width {
        padding-left: 0px;
        padding-right: 0px;
    }
    h1.header__heading {
        padding-left: 5rem;
}
    .header__icons.header__icons--localization.header-localization {
        padding-right: 5rem;
}
    .list-menu--inline {
        justify-content: center;
}
}

 

  • And Save.
  • Note: this design will only show on desktop not in mobile. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 9 (9)

Aquib
Shopify Partner
3 0 0

Hi Back2natureheal, Please image.png open the header section and after opening your header, there will be an option of the desktop logo position name through which you can change the position of the logo and navigation. also, I have attached the reference image. 

If you want to change your Navigation background color, you will get a option in header section (Color or Color Schema )  you can change the Navigation background color to whatever you want. I have attached the reference image for your help. If you need any other help, please let us know.

Aquib_0-1720550347909.png

 

askhan
back2natureheal
New Member
6 0 2

So for the logo - the option that works for me right now is the 'Top left' option - however the navigation menu is also aligned left, and I want it centered. When I use the 'middle center' option - my nav is aligned left and my logo is aligned center which isnt what I want!

 

And for the nav color - I want only my menu to be colored green, and the rest of my nav to be white - this cannot be achieved with the settings as it changes it all to the one color.

Aquib
Shopify Partner
3 0 0

Through CSS you can change the  menu color . I have share the code below please paste this code in you base.css file your nav menu color will be green.

.header__active-menu-item {
      color:green;
}
.header__menu-item {
   color: green;
}
askhan
back2natureheal
New Member
6 0 2

I would like the background of the nav to be green, instead of the text. And make the full width of the nav green if that makes sense.

Aquib
Shopify Partner
3 0 0

Hi Please share your store URL so I can help you change your nav background color.

 

Thanks!

askhan
back2natureheal
New Member
6 0 2
Made4uo-Ribe
Shopify Partner
6827 1629 2007

This is an accepted solution.

Do you mean like this? 

Made4uoRibe_0-1720561193280.png

If it's not would you mind provide some sample designs. I used this code. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media screen and (min-width: 990px) {
    .header--top-left, .header--middle-left:not(.header--has-menu) {
        grid-template-columns: 1fr auto 1fr;
    }
    nav.header__inline-menu {
        grid-area: 2/ span 3;
        text-align: center;
        background: green;
}
    .header__icons.header__icons--localization.header-localization {
        grid-area: 1/3;
}
    .header__active-menu-item, .header__menu-item {
        color: white;;
}
    .header:not(.drawer-menu).page-width {
        padding-left: 0px;
        padding-right: 0px;
    }
    h1.header__heading {
        padding-left: 5rem;
}
    .header__icons.header__icons--localization.header-localization {
        padding-right: 5rem;
}
    .list-menu--inline {
        justify-content: center;
}
}

 

  • And Save.
  • Note: this design will only show on desktop not in mobile. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
back2natureheal
New Member
6 0 2

This worked PERFECTLY! Thank you!!

Made4uo-Ribe
Shopify Partner
6827 1629 2007

Hi @back2natureheal 

Would you midn to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.