How to precisely position a glyphicon in the center of a navbar

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>

Answer №1

The navbar-toggle class will float your element to the right side of the screen. To center your button, simply remove the float property, set the display to block, and adjust the left and right margins accordingly.

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

For a live example, check out this link: http://jsfiddle.net/keithburgie/amysg7ru/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript API for Tableau

Could you please clarify the functions described below? newViz = createTableauViz(containerDiv, url, options); function listenForMarkSelection() { newViz.addEventListener(tableau.TableauEventName.MARKS_SELECTION, handleMarksSelection); } funct ...

What is the best way to substitute content with different content within a Django template?

One challenge I face is iterating over my model and replacing a list with sorted content from the same model by clicking a button. Imagine I have the following: <div class="col-md-3"> <button>Replace content </button> </div < ...

The responsiveness of Angular Material appears to be limited when tested in Chrome's debug mode for different devices

I have come across a peculiar issue. Within my HTML file, I have defined two attributes: Hide me on small devices Hide me on larger than small devices When I resize the window, the attributes work as intended. However, when I enter device debug mode ( ...

Encountering CORS problems when sending a request containing JSON data in the body

I have a local react application running on port 3000 and an express server running on port 8000. I am trying to make a request from within my react app as follows: fetch('http://localhost:8000/login', { method: 'POST', headers ...

Try to refrain from invoking effect within a component that is being conditionally rendered

I have a particular component that I am working with: const Component = () => { useEffect(() => { console.log('Executing useEffect in the Component') }, []) return <Text>element</Text>; } Whenever I conditionally re ...

Exclude striped tr elements within a subtable

I have a main table (Maintable) containing information, with each row having a sub-table for additional details that can be collapsed if needed. I am trying to stripe the rows in the Main table but using `tr:nth-child(even)` is not working as it also affec ...

Adjusting the height of a div based on the height of the window

Here is the HTML structure I am working with: <body> <div class="header">header</div> <div class="content"> hello </div> <div class="footer">footer</div> </body> This is the current ...

Distinguishing between creating controllers in AngularJS

I am a beginner in the world of AngularJS and I have come across two different examples when it comes to creating a controller. However, the one that is more commonly used doesn't seem to be working for me. The problem with the first example is that ...

Utilize jQueryUI's sortable feature to display a handy helper tooltip

Currently, I am working with two divs that each contain sortable elements. However, when I start dragging one of the elements, I would like it to only display a basic tooltip instead of the complete sortable element. The original element should remain visi ...

Interfacing Highcharts with Angular for seamless data binding across series

I am fairly new to using highcharts and I am having difficulty binding my data into the series parameter. In my controller, I have an array of objects that I want to display (when I use console.log, I can see that they are all properly there) this.plotDa ...

Extracting text from a JSON file and populating text fields: A step-by-step guide

Utilizing this JSFIDDLE to duplicate text fields has been quite helpful. I am now looking to create JSON data based on the input from all the text fields. When it comes to updating a page, I need to extract the JSON data and accurately populate the corresp ...

Retrieve GPS data source details using Angular 2

In my Angular 2 application, I am looking to access the GPS location of the device. While I am aware that I can utilize window.geolocation.watchposition() to receive updates on the GPS position, I need a way to distinguish the source of this information. ...

How is it that functions are perceived as objects?

Currently, I am delving into the realm of JS/ES and find myself puzzled by classes and objects. The two blocks of code displayed below achieve the same outcome; however, the latter unmistakably employs a class. But what exactly is the former using? Wasn&a ...

Hear for updates on Firebase data using AngularFire

Can Firebase server updates be listened to in the DOM through AngularFire? I am looking for a way to automatically retrieve any updates from the server and use them to update an array's values. The issue I am facing is related to using Firebase.Serve ...

Converting JQuery Object (Ajax-response) to an Array Containing Keys and Values

When I make an $.ajax request, the response I receive looks like this: https://i.sstatic.net/UfnfQ.jpg (please don't worry about the Russian symbols, they are just strings of text:)) I am aware that when PHP sends the request, it is in a simple arr ...

The issue I'm facing with my webpack-build is the exclusive appearance of the "error" that

Hey everyone! I'm currently facing an issue with importing a module called _module_name_ into my React project, specifically a TypeScript project named react-app. The module was actually developed by me and it's published on npm. When trying to i ...

Filter products by pressing the "Enter" key while using the search input in

I have a list of products and I want to only display products that have a description or name containing the typed word when enter is clicked on the search input. Here is what I tried in my Search component: const Search = (props) => { return ( &l ...

Is there a way to retrieve the complete relative path of an image in CakePHP 3.1?

I am trying to send an email with images that require the full path, such as http://www.example.com/img/image-name.jpg. I am currently using CakePHP 3 framework and have written the following code: $this->Html->image('image.jpg', ['fu ...

A guide to displaying a multidimensional array within a table using PHP

I attempted to display a multidimensional array in an HTML table, but it didn't turn out as expected. Let me showcase the code below. I experimented with using <br> and \n. I tried using one of them or both together, but it didn't yi ...

Comparing two arrays of objects in JavaScript using key and value pairs

I have two different arrays of objects listed below. I aim to compare them and determine the score based on matching random codes. The sample result is outlined for reference. Thank you. me.records.data1(array of objects) [ { id: 345, ...