Customizing header menu design and layout for Dawn theme

leesa22
Shopify Partner
4 0 0

I've been trying to days to create coding to make the header menu list how I'd like for it to appear. I'm wanting the menu along the bottom of the header, under the site logo, but I want the menu "bar" to be a different color than the background of the header itself. Then to be able to change the colors upon hover. Can anyone provide coding to help me achieve this?

Closest thing I can find to what I'm looking to do as an example would be pastelgrid.com if that helps.

 

Thank you in advance!

Replies 5 (5)

theycallmemakka
Shopify Partner
1484 337 360

Hi @leesa22 ,

 

In dawn you can set the Desktop logo to "Top Center" to achieve that look. For color customization, can you provide link to the store? And also provide the color codes so that i can write a CSS accordingly.

theycallmemakka_0-1712375370399.png

 

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

leesa22
Shopify Partner
4 0 0

I've already set the nav bar to center under the logo. I'm just struggling with figuring out the colors and blocks for the nav bar itself. website: https://emmysluxeboutique.myshopify.com/ password="password"

I'd like for the entire bar background-color (from left to right of screen) to be hex #C17D55 with 'color: #FCF0D9;'

Then upon hover, 'background-color: ##FCF0D9;' with 'color: #432C39;'

 

Thank you!

theycallmemakka
Shopify Partner
1484 337 360

Hi @leesa22 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
sticky-header.header-wrapper.color-scheme-2.gradient {
    background: #C17D55;
    color: ##FCF0D9;
}

.header__icon ,
.header__active-menu-item,
.header__menu-item{
    color: #FCF0D9;
}


.header__menu-item:hover,
.header__active-menu-item,
.header__menu-item:has(.header__active-menu-item){
    background: #FCF0D9;
    color: #432C39;
    text-decoration:none;
}

.header__menu-item span {
    text-decoration: none!important;
}

ul.list-menu.list-menu--inline {
    gap: 1rem;
}
</style>

theycallmemakka_0-1712378971094.png

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

leesa22
Shopify Partner
4 0 0

I'd like for the header background to stay white and only the nav bar to be #C17D55. Example: pastel grid.com

 

Thank you!

Aishamushtaq03
Tourist
11 0 3

Here's a simplified version of the CSS for the header menu:

```css
header {
background-color: #f2f2f2;
padding: 20px 0;
text-align: center;
}

nav ul li a {
color: #333;
}

nav ul li a:hover {
color: #ff0000;
}

nav ul li a::after {
content: '';
display: block;
width: 0;
height: 3px;
background-color: #ff0000;
position: absolute;
bottom: 0;
left: 50%;
transition: width 0.3s ease;
}

nav ul li a:hover::after {
width: 100%;
left: 0;
}
```