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

Store Design
, , , ,
1

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).

1 Like
2

Hi Back2natureheal, Please

To move logo and nav where you want.
To move logo and nav where you want.239×139 5.35 KB

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
Aquib_0-1720550347909.png239×167 4.17 KB

3

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.

4

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;

}

5

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.

6

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

Thanks!

7

Hi @back2natureheal

Would you midn to share your store URL? Thanks!

8

https://92f949-38.myshopify.com/

9

Do you mean like this?

Made4uoRibe_0-1720561193280.png
Made4uoRibe_0-1720561193280.png1916×434 28.5 KB

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
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. 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!

1 Like
10

This worked PERFECTLY! Thank you!!