The last 3 items in my Wordpress primary navigation menu are social icons. I want to have only these items align inline/horizontal on mobile.
I have tried float, display-inline, adding class d-display-inline and flex-direction to the 3 menu items but icons remain vertical.
Using Understrap theme:
Menu code (Understrap Theme)
<ul id="main-menu" class="navbar-nav ml-auto"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50 nav-item"><a title="Area" href="#" class="nav-link">Area</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51 nav-item"><a title="Project Story" href="#" class="nav-link">Project Story</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52 nav-item"><a title="Plans" href="#" class="nav-link">Plans</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53 nav-item"><a title="Interiors" href="#" class="nav-link">Interiors</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54 nav-item"><a title="Amenities" href="#" class="nav-link">Amenities</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-55" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-55 nav-item"><a title="Developer" href="#" class="nav-link">Developer</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-56 nav-item"><a title="News" href="#" class="nav-link">News</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-57" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-57 nav-item"><a title="Contact" href="#" class="nav-link">Contact</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-62" class="mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-62 nav-item"><a title="Registration" href="#" class="nav-link">Registration</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-66" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-66 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-facebook"></i></a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-67" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-67 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-twitter"></i></a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-68" class="social-inline menu-item menu-item-type-custom menu-item-object-custom menu-item-68 nav-item"><a href="#" class="nav-link"><i class="fa fa-lg fa-instagram"></i></a></li>
</ul>
CSS:
.navbar-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-expand-md .navbar-nav .social-inline {
border-bottom: none;
display: inline-block!important;
width: 10%!important;
float: left!important;
white-space: nowrap!important;
}
