Zailyn Tamayo Zailyn Tamayo - 1 year ago 83
CSS Question

Social Media icons in navbar horizontal spacing

I'm building a personal portfolio and I have a navbar with title, social media icons and navigation links. When viewing on mobile, the social media icons appear vertically under the title. I would like them to show up horizontally next to the title, so in between the title and the icon bar.

HTML:

<nav class="navbar">
<div class="container-fluid">
<!-- Navigation Bar -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class="navbar-header">
<a class="navbar-brand text-center" href="index.html">Title Website</a>
</div>

<!-- Small social media icons -->
<ul class="nav navbar navbar-nav navbar-left pull-left">
<li><a href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-lg"></a></li>
<li><a href="https://github.com/" target="_blank" class="fa fa-github fa-lg"></a></li>
<li><a href="http://www.linkedin.com/in/" target="_blank" class="fa fa-linkedin fa-lg"></a></li>
</ul>


<div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
<ul class="nav navbar-nav text-center">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="projects.html"><b>Projects</b></a></li>
<li><a href="media/resume.pdf" target="_blank"><b>CV/Resume</b></a></li>
</ul>
</div>

</div>
</nav>


CSS:

/* Navigation */
.navbar-header {
vertical-align: baseline !important;
}

.navbar-brand {
text-align: center;
font-size: 30px;
vertical-align: baseline !important;
}

.icon-bar {
background-color: black;
}

nav ul {
display: inline;
}

nav li {
display: inline;
padding: 10px;
}


Any help would be appreciated. Also, I would like the title to be vertically aligned when viewing on desktop. I tried
navbar-brand {vertical-align: middle !important}
but that did not work.

Thank you.
-Z

Answer Source

Got the icons how I wanted them by playing around. New code:

HTML:

        <!-- Small social media icons -->
        <ul class="nav navbar navbar-nav navbar-left pull-left">
            <li id="socmed"><a href="https://twitter.com/" target="_blank" class="fa fa-twitter fa-lg"></a></li>
            <li id="socmed"><a href="https://github.com/" target="_blank" class="fa fa-github fa-lg"></a></li>
            <li id="socmed"><a href="http://www.linkedin.com/in/" target="_blank" class="fa fa-linkedin fa-lg"></a></li>
        </ul>

CSS:

#socmed {
display: inline-block !important;
float: left !important;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download