How can I customize the header bar in the Dawn theme?

[toshiiki]

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:

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?

[webwondersco]

@toshiiki hope you are doing well.

could you please share your store URL?

[toshiiki]

6b9fcc-3.myshopify.com

pass: shaore

[webwondersco]

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

[toshiiki]

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

[webwondersco]

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

[toshiiki]

Yes! like that with the borders,

[webwondersco · 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:

[toshiiki]

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.