A user is customizing the Dawn theme to replicate header and footer elements from the Robirds theme. They need help with two specific modifications:
Header: Add vertical dividers between main menu items
Footer: Make the ‘Featured products’ section span full width with a dark background
A community member provided CSS code to create the vertical menu dividers, which was mostly successful. However, a follow-up issue emerged:
The discussion remains ongoing as the user seeks a solution for the inconsistent divider appearance on wide screens. The footer formatting request has not yet been addressed.
Hi there,
Hoping to get some initial set up support. I’ve been modifying the Dawn theme and would like to
replicate the look of the header and footer of the Robirds theme.
Robirds - Drone, Single Product Shopify Theme Preview - ThemeForest
How might I go about performing the below?
Header: Add a small vertical line in between each of the main menu items on all pages.
Footer: Make the ‘Featured products’ section dark across the width of the page
Thanks 
Hi @atom
PLease, share your store URL. Thanks!
Hi @atom ,
Please send the website link, I will check it for you
Much appreciated.
Much appreciated.
Thanks but its password protected.
Apologies.
password: thankyou
Hi @atom ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.list-menu.list-menu--inline li {
position: relative;
}
.list-menu.list-menu--inline li:after {
content: '';
height: 100%;
width: 1px;
background: #000000;
position: absolute;
left: 100%;
top: 0;
margin-left: 25px;
}
.list-menu.list-menu--inline li:last-child:after {
display: none;
}
Thanks that’s very close for the vertical main menu dividers. If I could bother you for another change.
The first divider has a different appearance to the second? The width looks very different?
How might I get the height of those lines to be the same height as the text?
