0

I'm trying to move my glyphicon(with its text) into the middle of the navbar and make it stay centered and responsive when you thin the window down. And I don't want it to scrunch together when the window is crammed, and I don't want the dropdown menu to go off to one side or anything(since one of the offered solutions did just that, which wasn't very nice).

Have looked at lots of stackexchange solutions, such as the following:

How do I center Glyphicons horizontally using Twitter Bootstrap

Center align "span" text inside a div

how do i get glyphicon in the center of the bootstrap navbar?

But they didn't help, I tried modifying them a bit but to no avail.

This is the piece in particular where the glyphicon and button is:

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                    <span class="glyphicon glyphicon-menu-hamburger" style="color:white; vertical-align:middle"></a></span><font color="white"> M E N U</font>
                </button>

Here's the entire code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Twenty Eight Interiors</title>
    <meta name="description" content="Twenty Eight Interiors">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

</head>
<body>
<!-- Navbar -->
    <nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;">
        <div class="container">
            <div class="navbar-header" id="oneDiv">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton">
                    <span class="glyphicon glyphicon-menu-hamburger" style="color:white; vertical-align:middle"></a></span><font color="white"> M E N U</font>
                </button>


            </div><!-- Navbar Header -->
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav" id="firstOne">
                    <li><a href="#" id="designProcess" role="button" id="designProcess">Design Process</a></li>
                    <li><a href="#" id="profile" role="button" id="profile">Profile</a></li>
                    <li><a href="#" id="contactInfo" role="button" id="contactInfo">Contact Info</a></li>
                </ul>
                <ul class="list-inline" id="secondOne">
                    <li><a href="http://www.facebook.com/" class="socialicon"><img src="facebook.png" hspace="30"></a></li>
                    <li><a href="http://www.twitter.com/" class="socialicon"><img src="twitter.png" hspace="30"></a></li>
                    <li><a href="http://www.instagram.com/" class="socialicon"><img src="instagram.png" hspace="30"></a></li>
                </ul>
            </div>
        </div><!-- End Container img src="twitter.png"-->
    </nav><!-- End navbar -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</body>
</html>

And does anyone know how I get rid of this gap?: enter image description here

EDIT: The CSS

        <style type="text/css">
    #my-navbar{
        background:rgba(0,0,0,0.9);
        margin-bottom:0;
    }

    ul#firstOne{
        background-color:rgba(48, 50, 50, 0.5);
        padding: 20px;
    }
    ul#secondOne{
        padding: 5px;
    }
    </style>
Community
  • 1
  • 1
user1770094
  • 87
  • 1
  • 3
  • 8

1 Answers1

1

The navbar-toggle class floats your element to the right. You can center your button by removing the float, setting the element to display: block, and setting the left and right margin to auto.

.navbar-toggle {
   float: none;
   display: block;
   margin: 8px auto;
}

See here: http://jsfiddle.net/keithburgie/amysg7ru/

kburgie
  • 695
  • 6
  • 14
  • Spot-on, thaks a bunch!! :D Do you happen to know how to solve the gap thing too by any chance? – user1770094 Mar 02 '15 at 11:59
  • Are you seeing the same gap in my Fiddle? It looks different in your screenshot. – kburgie Mar 02 '15 at 12:01
  • Not in the fiddle, this isbecause I've got some CSS I shaved off, I'll put it in too, just a sec.. There, added it. – user1770094 Mar 02 '15 at 12:08
  • Alright, so that gap always exists, you're just seeing it because you're changing the
      background color. I updated my Fiddle to remove the margin-top from .navbar-nav. If you're not already, try using Chrome DevTools or Firefox's Firebug to inspect and try changes https://developer.chrome.com/devtools
     – kburgie Mar 02 '15 at 12:19
  • Marked as answer, you're awesome!! :) – user1770094 Mar 02 '15 at 12:24