Sub menu indicators in Genesis

In the past I wrote an article titled Adding nav sub menu indicators in Genesis using Font Awesome.

This tutorial provides the steps to add submenu indicators without using Font Awesome in Genesis.

While the tutorial has been written for Genesis Sample 2.6.0, it should work with a few adjustments in any Genesis theme.

Step 1

Add the following inside the 960px min-width media query:

.menu-item.menu-item-has-children > a > span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.menu-item.menu-item-has-children > a > span::after {
    /* display: inline-block; */
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-top: 1px solid;
    border-right: 1px solid;
    content: "";
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.sub-menu .menu-item.menu-item-has-children > a > span {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sub-menu .menu-item.menu-item-has-children > a > span::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

That’s it!

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.