Hello guys i am using foundation framework to build a fixed navigation
My html is as follows
<div class="fixed">
<div class="contain-to-grid">
<nav class="top-bar">
<ul class="title-area">
<li class="name hide-for-medium-up"><h1><a href="#">topbar</a></h1></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<div class="top-bar-section">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
</ul>
</div>
</nav>
</div>
</div>
My question is:- i need to remove the title area for large devices and need to center the top-bar-section horizontally i removed h1 tag by adding hide-for-medium-up class but i couldnt center the tap-bar-section. It is possible to align this section to left or to right by applying left or right classes to top-bar-sections's ul tag. But i didnt find a way to center it i used following sass rules. But it didnt work
.top-bar-section {
text-align: center;
margin: 0 auto;
ul {
li {
a {
font-size: emCalc(14px);
font-weight: 400;
}
}
}
}