I am trying to align the logo, nav links, and social icons on one line. I am using bootstrap, and custom css styling on my page.
HTML:
<header id="header-main">
<div id="site-header">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="site-logo">
<a href="www.google.com"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" /></a>
</div>
<div class="social-set">
<a href="https://www.facebook.com" target="_blank">
<li class="fa fa-facebook"></li>
</a>
</div>
<!-- end social-set -->
<nav id="nav">
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-33 current_page_item menu-item-47"><a href="http://www.website.com/">Home</a></li>
</ul>
</div>
</nav>
</div>
<!-- .col-sm-12 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</div>
<!-- .site-header -->
CSS:
#header-main {
width: 100%;
margin: 0 0 9px 0;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
#site-header {
max-width: 1280px;
margin: 0 auto;
background: #fff;
position: relative;
}
#site-logo {
margin: 0;
padding: 0;
line-height: 1em;
position: relative;
font-weight: 900;
font-size: 2em;
z-index: 999;
display: inline-block;
}
.social-set ul {
margin: 6px 0 0 !important;
padding: 0;
display: inline;
}
.social-set ul li {
padding: 0 2px 5px 0;
margin: 0;
display: inline-block;
border: none !important;
clear: none;
line-height: 100%;
}
.social-set li img {
vertical-align: middle;
margin-top: -3px;
}
#nav {
max-height: 100px;
overflow: hidden;
}
#nav ul {
margin: 0 0 30px 0;
text-align: center;
}
#nav ul {
margin: 0 0 30px 0;
text-align: center;
}
#nav li {
padding: 0 16px;
font: 400 18px/13px 'Open Sans', sans-serif;
display: inline-block;
text-transform: uppercase;
}
.social-set {
float: right;
margin-bottom: 10px;
}
I can use position: absolute
to set the logo at a fixed position and on one line but I would like to use position relative
and have it adjust itself on one line depending on the number of links in navigation and social icons.
social
and nav
elements need display: inline-block
property. Also with, vertical-align and line-height you could align to the same line.