Solved

Custom Header Bar Using the Dawn Theme

toshiiki
Shopify Partner
7 0 0

I have recently been trying to incorporate some custom changes to a store using the Dawn Theme on Shopify. I have been having trouble getting a menu bar similar to this sample:Screen Shot 2024-02-16 at 6.01.16 PM.png

 

I have already hidden the cart and search buttons that are defaulted on the theme, however, I can't seem to get the menu to change its orientation to a list like above. Is there anyone that would know a solution?

 

Accepted Solution (1)
webwondersco
Shopify Partner
1036 157 154

This is an accepted solution.

@toshiiki Please add the below line of CSS code at the end of your base.css file

 

body header.header {
    display:block;
    text-align:center;
}
header.header .header__icons{
    justify-content:center;
}
header.header .list-menu__item{
    justify-content:center;
}
header.header .list-menu--inline{
    flex-direction:column;
    display: flex;
}
header.header .list-menu--inline li{
    border-bottom:1px solid #000;
    
}

 

Result:

webwondersco_0-1708346657409.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂

View solution in original post

Replies 8 (8)

webwondersco
Shopify Partner
1036 157 154

@toshiiki hope you are doing well.

 

could you please share your store URL?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
toshiiki
Shopify Partner
7 0 0

6b9fcc-3.myshopify.com

pass: shaore

webwondersco
Shopify Partner
1036 157 154

@toshiiki Currently it looks perfect. Have you changed the theme?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
toshiiki
Shopify Partner
7 0 0

No it still hasn't had the navigation bar adjusted like in the mockup image, I still need to change that.

 

webwondersco
Shopify Partner
1036 157 154

@toshiiki  just want to confirm would you like to display like this?

 

webwondersco_0-1708252447259.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
toshiiki
Shopify Partner
7 0 0

Yes! like that with the borders,

 

 

webwondersco
Shopify Partner
1036 157 154

This is an accepted solution.

@toshiiki Please add the below line of CSS code at the end of your base.css file

 

body header.header {
    display:block;
    text-align:center;
}
header.header .header__icons{
    justify-content:center;
}
header.header .list-menu__item{
    justify-content:center;
}
header.header .list-menu--inline{
    flex-direction:column;
    display: flex;
}
header.header .list-menu--inline li{
    border-bottom:1px solid #000;
    
}

 

Result:

webwondersco_0-1708346657409.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂
toshiiki
Shopify Partner
7 0 0

This is. very clean solution, however, is there a way to add borders to the top and bottom of each item without having the borders appear thicker next to each other? I have attached an image below of what happens when top and bottom are added.

 

 

 Screen Shot 2024-02-20 at 1.18.41 PM.png