I have a navigation menu, and the first item replaces the content with an icon. I'm doing this by setting the font-size
to 0px
of the main element, and then adding an after element. This seems to be a common practice and it works so far so good.
However I can't seem to align the after element with the rest of the navigation menu.
I started playing around with line-height
and vertical-align
which got me closer to my goal, but as you can see, it's still not properly working as expected.
The fiddle can be found here: https://jsfiddle.net/67dyxLr1/
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
<li class="menu-item"><a href="#">About Us</a></li>
</ul>
</nav>
Here is my CSS:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black; /* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {
}
.home a {
font-size:0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
Just add vertical-align: middle
to your li
CSS
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle;
}
You need to add vertical align to your li:
.nav-primary { background: #CCC; } .nav-primary li { list-style-type: none; display: inline-block; text-align: left; font-size: 26px; line-height: 0px; vertical-align: middle; /* add this */ } .nav-primary a { display: inline-block; padding: 32px 20px; border: 1px dashed black; /* border only used for display purpose of alignment*/ margin-right: -4px; } .nav-primary a:hover { background: #FFF; } .menu { width: 100%; } .menu-item {} .home a { font-size: 0px; } .home a:after { font-family: "dashicons"; content: " \\f102"; font-size: 40px; display: inline-block; vertical-align: middle; line-height: 0px; }
<nav class="nav-primary"> <ul class="menu"> <li class="menu-item home"><a href="#">Home</a></li> <li class="menu-item"><a href="#">Blog</a></li> <li class="menu-item"><a href="#">Contact</a></li> <li class="menu-item"><a href="#">About Us</a></li> </ul> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.