CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfont-awesome
ck777
ck777

Reputation: 139

How to pull social icons to the right when using central logo navbar bootstrap

When I pull my social icons to the right, they end up pushing my centered logo down a little, as opposed to being placed at the same height as the logo (i.e not higher than the logo, creating extra white space above it)

I have tried floating them to the left, making the position absolute etc but with no luck.

Could someone please help me out with making them appear at the top right of the screen but without extra space above them?

Here is my code for the navbar with social icons:

html

    <nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-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>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
  <ul class="nav navbar-nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Cars</a></li>
    <a href="#"><img id="logo-navbar-middle" src="../assets/images/logo.png" width="250" alt="logo"></a>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact us</a></li>
     </ul>

 <ul class="nav navbar-nav navbar-right pull-right">
            <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a>   </li>
            <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
            <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
        </ul>



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

CSS

#navbar-primary .navbar-nav { 
background: #fff;
width: 100%;
text-align: center;
li {
display: inline-block;
float: none;
a {
  padding-left: 30px;
  padding-right: 30px;
  padding-top:10px;
}
}
}


.social {
margin: 0;
padding: 0;

}

.social ul {
margin: 0;
padding: 5px;
}

.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}

Any help much appreciated, I have been stuck on this for a number of days

Thanks!

Upvotes: 0

Views: 1159

Answers (1)

devfaysal
devfaysal

Reputation: 168

Here is what I did, but there might have some responsive issue but it might help you.

   <!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
            <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
            <style type="text/css">
                .navbar .navbar-nav {
                    display: inline-block;
                    float: none;
                }

                .navbar .navbar-collapse {
                    text-align: center;
                }
                .top-nav{
                    margin-bottom: 0;
                    padding-top: 10px;
                    min-height: 20px;
                }
                .top-nav .navbar-nav>li>a{
                    padding: 0 5px 0 5px;
                }
                .top-nav .navbar-right{
                    margin-right: 10px;
                }
                .logo{
                    margin-top: -30px;
                }
            </style>
        </head>
        <body>
            <nav class="navbar top-nav">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-camera-retro fa-lg"></i></a>   </li>
                    <li><a href="#"><i class="fa fa-twitter fa-lg"></i></a></li>
                    <li><a href="#"><i class="fa fa-pinterest fa-lg"></i></a></li>
                </ul>
            </nav>
            <nav id="navbar-primary" class="navbar" role="navigation">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-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>
                            <div class="collapse navbar-collapse" id="navbar-primary-collapse">
                                <ul class="nav navbar-nav">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Our Cars</a></li>
                                    <li><a href="#" style="padding-top: 0;"><img class="logo" src="logo.png" alt="Silver Lining Wedding and Classic Car Chauffeurs Nottingham Logo"></a></li>
                                    <li><a href="#">Gallery</a></li>
                                    <li><a href="#">Contact us</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->          
                        </div>
                    </div>
                </div><!-- /.container-fluid --> 
            </nav>
            <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </body>
    </html>

Upvotes: 2

Related Questions