Centering Navbar Icon Text - Rails App Using Bootstrap

January 31, 2023 Post a Comment

I have a 4.x Rails app using Bootstrap. The navbar has Font Awesome icons in it. When you hover over an icon, a with one word of text appears below the icon. The pro

Solution 1:

HPJAJ, Hi there. Try using line-height: XXpx; and make the this value the same px height as your icon. This is a easy way to get your text in the middle vertically. I also think the<span> may have some padding-top too, so keep this in mind.

Added to post

Roger that, you meant horizontally.

I put your code up and found that you have an issue with having those col-xs-1 col-xs-offset-2 in the navbar.
For this demo, I turned on the parts you were not displaying. Like the text and the icons.

Removing the classes showed that your text was centered.

As you will see in this code below.

Here is a working Fiddle.

enter image description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link  href="../../fav.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link  href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
  
    
.navbar {
  min-height: 80px;
  border-radius: 0;  
}

.navbar-default {
  background-color: #98172c;
  border-color: #98172c;
}

.fa {
  color: white;
}

.mojo-logo {
  max-height: 60px;
}

#nav-microphone, #nav-video, #nav-exit {
  display: block;
}

.navbar-nav > li > a {
  padding-bottom: 20px;
}

.nav--text {
  display: block;
  color: white;
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Garamond Pro;
}

.navbar-nav > li > a:hover .nav--text {
  display: block;
  color:darkorange;    
}

.nav > li > a {
  padding: 10px 0px;
  
}

.nav > li {
  padding-top: 10px;
  min-height: 99px;
  min-width: 95px;
  text-align: center;
}    
    
</style>

</head>

<body>

    
<div class="navbar-collapse collapse navbar-default">
  <ul class="nav navbar-nav navbar-right ">
    <li id="nav-microphone"><a href="#" >
      <i class="fa fa-microphone fa-3x"></i><br>
      <span class="nav--text">mute</span>
      </a>
    </li>
    <li id="nav-video"><a href="#" >
      <i class="fa fa-video-camera fa-3x"></i><br>
      <span class="nav--text">off</span>
      </a>
    </li>
    <li id="nav-exit"><a href="#" >
      <i class="fa fa-sign-out fa-3x"></i><br> 
      <span class="nav--text">hangup</span>
      </a>
    </li>
    <li id="nav-settings"><a href="#" >
      <i class="fa fa-cog fa-3x"></i><br> 
      <span class="nav--text">settings</span>
      </a>
    </li>
  </ul>
</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

Stack in Html5

Centering Navbar Icon Text - Rails App Using Bootstrap

Solution 1:

Post a Comment for "Centering Navbar Icon Text - Rails App Using Bootstrap"