joomla gantry template css arrow indicator

Question

In the fusion menu from gantry-framework I have an Item with a sub-menu. Naturally there is a submenu-indicator, a down-arrow suggesting there is more to that menu item. I managed to increase the size of the menu button (it was a requirement) using this gantry-custom.css file:

.gf-menu.l1 > li > .item{
    font-size:15px;
    line-height:64px;
    padding-top:7px;
    padding-bottom:7px;
    position:relative;
}

Now, THE PROBLEM is that the indicator (the down-arrow) is now very low beneath the menu title, like in this picture:

I need to have the arrow placed on the same line with the menu-title. How can I do that?

Thank you

Answer 1

On the menu css file add the following, or change the respective class declaration parameter to fit your needs. The positioning "top" is what defines the arrow position relative to the container element.

.gf-menu li.parent > .item:after {
    top: 20%; /* this is the parameter that defines the arrow positioning */
}