I am struggling to center my glyphicon (with its accompanying text) in the middle of the navbar, ensuring it remains centered and responsive even when the window is resized. I want to prevent it from scrunching together when the window is narrow and avoid the dropdown menu from shifting off to one side. I have explored various solutions on Stack Exchange, such as:
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?
However, none of these solutions provided the required assistance, despite my attempts to tweak them.
This snippet showcases where the glyphicon and button are located:
<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>
Below is the full HTML 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>
If anyone knows how to eliminate this gap, your help would be greatly appreciated:
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>