Sridhar Katakam

Genesis and WordPress Tutorials

Sub menu indicators in Genesis

by 1 Comment

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!

>