I managed to add a custom glyph under the currently selected menu item on my website. But I don't know how to center the glyph... The first one is centered, but when we hover over the other menu items, they have varying lengths and the centering is lost... It is purely css, based on the "a::after" property. Does anyone have a creative idea?
Here is the website: www.latelierdegaia.ch and below is the CSS. Thank you so much in advance!
.navigation-top a::after {
width: 60px;
content: " ";
background-image: url('images/menu-glyph-2.png');
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 5%;
bottom: 0px;
height:30px;
opacity: 0;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition: 0.3s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
}
.navigation-top li:hover > a::after,
.navigation-top li.focus > a::after,
.current_page_item > a::after {
opacity: 1;
}
In the rule for the ::after pseudo element, change width to 100% and background-size to 60px auto;, and add background-position: center top.