What is the best way to center a glyphicon within a bootstrap navbar?

I am struggling to center the glyphicon-log-in within the Bootstrap navbar. Currently, it is displaying above the navbar when I try to debug it.

<a class="navbar-brand pull-left" href="/"><img src="images/logo.png" alt="Elunika"></a>

<span class="glyphicon glyphicon-log-in" id="logIcon"></span>

<div class="nav-collapse collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav pull-right">
                <li class="active">
                    <a href="#">HOME</a>
                </li>
                <li>
                    <a href="#">ABOUT</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> WHO, HOW & WHAT? </a>

                <ul class="dropdown-menu">
                    <li>
                        <a href="#">WHO WE ARE?</a>
                    </li>

                    <li>
                        <a href="#">WHAT IS IT?</a>
                    </li>

                    <li>
                        <a href="#">HOW IT WORKS?</a>
                    </li>

                </ul>
                    </li>
                <li>
                    <a href="#">CONTACT US</a>
                </li>
        </ul>
  </div>

The CSS for logIcon is as follows:

#logIcon{
position: absolute;
margin-left:auto;
margin-right:auto;
}

Any assistance with this issue would be greatly appreciated. Thank you in advance.

htmlcsstwitter-bootstrapglyphicons

Answer №1

Based on the bootsnipp you shared, all you need to do is substitute the word "brand" with your chosen glyphicon span.

<div class="navbar-brand navbar-brand-centered"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></div>

If you want to see it in action, check out this live demo: http://www.bootply.com/EmzUMHPXqd

Answer №2

http://www.example.com/unique-link

To customize the position of an icon within a navigation bar, you can create a new CSS class like so:

.navbar-center
{
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Then, apply this class in your markup as demonstrated below:

<nav class="navbar" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-center navbar-text" href="#"><span class="glyphicon glyphicon-log-in" id="logIcon"></span></a>
  <div class="navbar-collapse collapse">
    <a class="navbar-brand" href="/"><img src="images/logo.png" alt="Company Name"></a>

    <ul class="nav navbar-nav navbar-right">
      <li class="active">
        <a href="#">HOME</a>
      </li>
      <li>
        <a href="#">ABOUT</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> WHO, HOW &amp; WHAT? </a>

        <ul class="dropdown-menu">
          <li>
            <a href="#">WHO WE ARE?</a>
          </li>

          <li>
            <a href="#">WHAT IS IT?</a>
          </li>

          <li>
            <a href="#">HOW IT WORKS?</a>
          </li>

        </ul>
      </li>
      <li>
        <a href="#">CONTACT US</a>
      </li>
    </ul>
  </div>
</nav>

http://www.example.com/unique-link

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

Achieving consistent width for flex items in each row

Can I ensure that all flex items have the same width? Currently, my code looks like this: .video-container { background-color: blue; min-height: 90vh; display: flex; flex-wrap: wrap; } .video { flex: 1 0 25%; } <div class="video-contain ...

htmlcssflexbox

Align dropdown menus vertically in Bootstrap

Issue: Struggling to vertically align multiple dropdown menus in Bootstrap. Currently, the left side of the navbar is properly aligned but not the right side. Seeking advice on how to approach this problem and find a solution. Code Example: <h ...

htmlcsstwitter-bootstrapdrop-down-menuvertical-alignment

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

cssangularangular-material

The removal of a JQuery element can result in causing the webpage to become unresponsive and lead to

When attempting to create a loop in JQuery to remove elements from my HTML, I encountered an issue where the function caused my browser to hang and become unresponsive. Here is the JQuery code I used: function removeElement(){ var i =0; ...

javascriptjqueryhtml

Is it possible to use React and Material-UI to make a paper element extend to full width beyond the boundaries of a Container?

Assuming I have the following code snippet: <Container maxWidth='lg'> <Grid container spacing={3}> <Grid item xs={12} md={6} > <Image src="/img/undraw_programming_2svr.png" color='transparent' ...

cssreactjsmaterial-ui

How can I show or hide a survey pop-up depending on the URL in the address bar?

There are 2 different applications in play here. My application is built using Angular for the front end and can be accessed at http://test.com/search. It includes a JavaScript function that triggers a survey popup whenever a user visits our website. Anot ...

javascripthtmlangularjsangularurl

What is the best way to center the text in the middle of a flex container?

I am struggling with the alignment of elements in my code. Here is what I currently have: HTML: </div class="container"> <footer>Maximilian Crosby ©</footer> </div> <div class="bot-bar" > <a href="./contact-u ...

htmlcssflexboxcentering

Looking to connect information

I have written the following code and I am trying to bind data to ng-model. When I use ng-model = "value", I can see the value in the text field, but I want to update the value when the text input is changed. <tbody ng-repeat="action in model.editAct ...

htmlangularjs

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

cssmarkdownreveal.js

How can I add text to a bar or table using CSS/HTML?

I am trying to create a design similar to this: http://img291.imageshack.us/img291/5571/bartablestyling.png Currently, I only have the top bar in place. When I attempt to add text, it ends up below the profile picture. I want to avoid using float:left ...

htmlcss

If viewed on a mobile device, separate the array (indexed list) into two rows

Currently, I am working on my Ionic project where I am trying to implement an indexed list horizontally instead of vertically. While the list looks good as it is now, I want to make sure it supports smaller screen devices too by splitting the list into two ...

javascripthtmlcssangularjsionic-framework

Is there a way to fully deactivate Next.js server-side rendering (SSR)?

I am on a quest to figure out how to turn off server-side rendering in NextJS and host it on a platform that doesn't support SSR. My online searches are currently focused on whether SSR can be completely disabled in NextJS using NextPages instead of N ...

htmlnext.jshostingserver-side-renderingstatic-site-generation

Angular Material's <mat-select> tag allows for the inclusion of an <input> element within it

I am attempting to place an input element inside the mat-select tag of the Angular Material element. However, I am facing an issue where I cannot input any text into the input field inside the select element. Below is the code I am using to search for elem ...

htmlangulartypescriptbootstrap-4angular-material

Extracting all href links from the webpage source code utilizing Selenium WebDriver in Java

Currently, I am working on testing the HTTP RESPONSE of all the href links present on a webpage. My approach involves using WebDriver to fetch all links from the page and then utilizing http.connect to obtain the response status. Here is a snippet of the ...

javahtmlwebselenium-webdriverhref

Angular Bootstrap UI - Ensuring only one element collapses at a time

I have integrated the angular bootstrap UI library into my website by following this link: https://angular-ui.github.io/bootstrap/ One issue I am facing is that when I implement a collapsible feature using this library, it collapses or expands every eleme ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

What is the method for accessing an HTML control with hyphens in its ID?

I am currently facing a dilemma while converting my front end written in HTML to ASP. The issue arises because many controls have names with "-" in them, causing significant headaches as there is no time to rename everything. Using "ctrl-f" and replace bre ...

c#htmlcssasp.net.net

JavaScript for rotating an element upon button click

My webpage design <div id="yabanner"> <img src="img/ok.jpg"> </div> <button>Click Me</button> <button>Click Me</button> <button>Click Me</button> My script code var button = document.getElementsBy ...

javascripthtmldom

Enhance user experience with Google Optimize by conducting A/B testing on

I am seeking advice on Google Optimize CSS code. My goal is to perform A/B testing on button colors throughout my entire WordPress website at www.interica.si. When I make changes to the CSS code in the edit mode, it seems to affect all buttons, but when I ...

javascripthtmlcssoptimization

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Currently utilizing CSS modules within a create-react-app project and encountering an error within Google Chrome browser: https://i.stack.imgur.com/0ItNM.png However, the error appears to be related to eslint because I am able to close the warning modal i ...

cssreactjsreact-css-modules

Floating columns in Bootstrap 5 create a visually appealing layout by splitting the sidebar above and below the main content

Is there a way to achieve this layout in Bootstrap 5? It seems like previous solutions on Stack Overflow are for older Bootstrap versions. I want my main content to be on the left and a sidebar on the right. The sidebar should have 2 sections that stack a ...

twitter-bootstrapbootstrap-5