Snippets: How to Add Border “Dividers” Between Menu Items in Header Style Three

This little bit of CSS will add borders between your items in header style three (bottom centered menu). The CSS of course can be tweaked to better fit your needs but it's a good starting point.

.navbar-style-three .dropdown-menu > li {
    border-right: 1px solid #ddd;
}

.navbar-style-three .dropdown-menu > li:last-child {
    border: 0;
}

.navbar-style-three {
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-style-three .dropdown-menu > li > a {
    height: auto;
    line-height: normal;
}

.navbar-style-three .dropdown-menu > li > a > span.link-inner {
    padding-top: 0;
    padding-bottom: 0;
}

Snippet Type: CSS

Posted Under: Menu

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.