Trying to align the navigation menus image with the social icons has proven to be quite challenging. As a student looking to develop a WordPress theme, I would appreciate some assistance as I am currently stuck. Any help is greatly appreciated, thank you.
Here is the code I have been working on:
HTML - Utilizing WordPress...
<div class="menus">
<nav id="nav-menus" class="nav-menus">
<?php $args = array('theme_location' => 'primary');
wp_nav_menu( $args );
?>
</nav>
<div class="social">
<ul>
<li>
<i class="fa fa-facebook-square fa-2x"></i>
</li>
<li>
<i class="fa fa-twitter-square fa-2x"></i>
</li>
<li>
<i class="fa fa-youtube-square fa-2x"></i>
</li>
<li>
<i class="fa fa-google-plus-square fa-2x"></i>
</li>
<li>
<i class="fa fa-youtube-square fa-2x"></i>
</li>
</ul>
</div>
</div>
CSS
#nav-menus{
height: 50px;
width: 100%;
background-color: #f68e56;
}
.menus > .nav-menus{
border-radius: 20px;
}
.menus > .nav-menus ul{
float: left;
}
.menus > .nav-menus ul li{
font-size: 32px;
display: inline;
padding-left: 17px;
line-height: 50px;
}
.menus > .nav-menus ul li a{
text-decoration: none;
color: white;
}
.menus > .nav-menus ul li a:hover{
color: yellow;
}
.menus > .social ul{
float: right;
}
.menus > .social ul li{
display: inline;
}
.menus > .social ul li i{
padding-left: 10px;
}