CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Lucky
Lucky

Reputation: 121

Display icons inline with navigation

enter image description here

My html markup is:

            <div class="row">
                <div class="col-sm-8">

                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="sr-only">Toggle  navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- navbar-header -->


                    <nav class="collapse navbar-collapse navigation" id="navbar-collapse">

                        <ul class="nav navbar-nav menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="blog.html">Features</a></li>
                            <li><a href="resources.html">Lifestyle</a></li>
                            <li><a href="contact.html">Travel</a></li>
                            <li><a href="contact.html">Music</a></li>
                            <li><a href="contact.html">About</a></li>
                            <li><a href="contact.html">Contact Me</a></li>
                        </ul>

                    </nav>

                </div>
                <!-- navbar-collapse -->

                <div class="col-sm-4 navigation" id="social-icons">

                    <ul class="menu">

                        <a href=""><i class="fa fa-facebook"></i></a>
                        <a href=""><i class="fa fa-twitter"></i></a>
                        <a href=""><i class="fa fa-instagram"></i></a>
                        <a href=""><i class="fa fa-pinterest"></i></a>
                        <a href=""><i class="fa fa-heart"></i></a>
                        <a href=""><i class="fa fa-google-plus"></i></a>
                        <a href=""><i class="fa fa-tumblr"></i></a>

                    </ul>
                </div>
                <!-- social-icons -->
            </div><!-- row -->
        </div>
        <!-- container -->
    </nav>

While resizing window, the lists stack probably because i have used the grid system.

enter image description here

But what I want to achieve is that the responsive menu(the three lines) be pulled to the left and the icons remain at their place.

I am trying to learn web development on my own. Any help/suggestion would be appreciated.

Edit 1: After using media query to set the position of the icons to relative, i have achieved this.

enter image description here

I want the icons to be on the right side and the menu to be on the left side.

Upvotes: 1

Views: 2850

Answers (1)

Jishnu V S
Jishnu V S

Reputation: 8409

set position:relative to the parent div then Try with this

@media (max-width:767px){
      #social-icons {
         position:absolute;
         top:15px; /*or whatever you need*/
      }
}

Try with the code snippet

.navbar-toggle {
	background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.navbar-toggle {
	background: #000;
    float:left;
}
#social-icons {
	position: absolute;
	top: 15px;
	right: 15px;
}
</style>
<div class="col-sm-8">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle  navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
  </div>
  <!-- navbar-header -->
  
  <nav class="collapse navbar-collapse navigation" id="navbar-collapse">
    <ul class="nav navbar-nav menu">
      <li><a href="/">Home</a></li>
      <li><a href="blog.html">Features</a></li>
      <li><a href="resources.html">Lifestyle</a></li>
      <li><a href="contact.html">Travel</a></li>
      <li><a href="contact.html">Music</a></li>
      <li><a href="contact.html">About</a></li>
      <li><a href="contact.html">Contact Me</a></li>
    </ul>
  </nav>
</div>
<!-- navbar-collapse -->

<div class="col-sm-4 navigation" id="social-icons">
  <ul class="menu">
    <a href=""><i class="fa fa-facebook"></i></a> <a href=""><i class="fa fa-twitter"></i></a> <a href=""><i class="fa fa-instagram"></i></a> <a href=""><i class="fa fa-pinterest"></i></a> <a href=""><i class="fa fa-heart"></i></a> <a href=""><i class="fa fa-google-plus"></i></a> <a href=""><i class="fa fa-tumblr"></i></a>
  </ul>
</div>
<!-- social-icons -->

</div>
<!-- container -->
</nav>
<!--/.nav-collapse --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions