Bootstrap Navbar Content Not Centered

Question

I am relatively new to bootstrap and html/css and so far I have been getting along pretty well. What I have been trying to do is increasing the height of the navbar to 80px. My problem is that now I cannot get the content of my navbar centered, they are just too high up.

It looks like this: https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6

Thanks :)

Here is my whole CSS code:

* {
 box-sizing: border-box;
}

body {
 background-color:#f6f6f6;
 background-image: url("img/bg.png");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center center;
 background-size:cover;
 overflow-x:hidden;
 overflow-y:scroll;
 margin:0;
 padding:0!important;
}

.navbar {
    position: relative;
 border:1px solid transparent;
 min-height: 80px;
 border-top: 0;
 border-bottom:1px solid #e7e7e7;
 margin-bottom:0;
 z-index: 100;
}

.navbar-default {
  height: 80px;
}

.navbar-brand {
    float:left;
    font-size:18px;
    line-height:80px;
    height:80px;
    padding:0 15px;
}

.navbar-toggle {
 margin-top: 23px;
 padding: 9px 10px !important;
}


.navbar-nav > li > a {
 height: 80px;
 padding-top:10px;
    padding-bottom:10px;
    line-height:20px;
 border-left: 1px solid #e7e7e7;
}

.navbar-left {
    float:left!important;
}

.navbar-right {
    float:right!important;
    margin-right:-15px;
}

.navbar-nav>li>.dropdown-menu {
    margin-top:0;
    border-top-right-radius:0;
    border-top-left-radius:0;
}

HTML:

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

<head>

  <!-- Bootstrap required meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Links to stylesheets and scripts -->  
  <link href="style.css" type="text/css" rel="stylesheet"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
  <title>Test</title>
  
</head>

<body>

<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Leaderboards</a></li>
      <li><a href="#">Support</a></li>
   
 <li class="dropdown">
   <a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
   <span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">Settings</a></li>
  <li><a href="#">Statistics</a></li>
  <li><a href="#">History</a></li>
  <li><a href="#">Logout</a></li>
  
   </ul>
 </li>
 
    </ul>
  </div>
</nav>

</body>

</html>

You are required to post a complete, minimal example of the markup that shows the problem: [mcve] — Rob, Jul 16 '17 at 12:06

Dan Kreiger · Accepted Answer · 2017-07-16T12:55:02.373

2

Try adding the following flex properties inside of your .navbar-nav > li > a CSS block:

display: flex;
align-items: center;

So the .navbar-nav > li > a block should now look like this:

.navbar-nav > li > a {
  display: flex;
  align-items: center;  
  height: 80px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  border-left: 1px solid #e7e7e7;
}

CodePen Demo

edited Jul 16 '17 at 12:55

answered Jul 16 '17 at 12:11

Dan Kreiger

5,358
2
23
27

Didn't help, the content is still at the top unfortunately – User3434343443 Jul 16 '17 at 12:16
Could you maybe post your html? I saw the problem and fixed it in the CodePen, but I'm just using Bootstrap boilerplate HTML for the navbar. – Dan Kreiger Jul 16 '17 at 12:20
1

@DerJP I've updated my answer. I don't know what your HTML looks like, but if you add those flex properties inside of your `.navbar-nav > li > a` block, it should center the items. – Dan Kreiger Jul 16 '17 at 12:37
It didn't solve the problem, but I included my HTML so I hope you can find the problem now. Thanks for your effort, I really appreciate it :) – User3434343443 Jul 16 '17 at 12:48
1

Have a look at the [CodePen](https://codepen.io/dankreiger5/pen/JJVbbQ) - it's using your HTML code exactly :) I've also updated my answer to make it more specific to your HTML. – Dan Kreiger Jul 16 '17 at 12:50
I don't get it. I directly replaced my code with the code from CodePen and I somehow still have the same issue. – User3434343443 Jul 16 '17 at 12:58
Hmm...are you using internet explorer? Sometimes flexbox can be problematic on IE. There are other ways of centering it without flexbox. You could change the `padding-top` inside your `.navbar-nav > li > a` block to `30px`. – Dan Kreiger Jul 16 '17 at 13:13
I'm using Chrome, but I'm gonna try the way with the padding :) – User3434343443 Jul 16 '17 at 13:15
You replaced `padding-top: 10px;` with `padding-top: 30px;` and it didn't work? I'm not sure then. The only other thing I can think of is looking in your console inside of your dev tools to see if there are any errors. – Dan Kreiger Jul 16 '17 at 13:26
So, I've looked into this for a good while now and I think I have a clue why this is happening. I pasted my whole html in CodePen and it replicated the same problem I have. But when I removed everything but the code for the navigation bar it looked how I want it. Could you look into this? I really appreciate your work – User3434343443 Jul 16 '17 at 14:35
Could you post the CodePen link? – Dan Kreiger Jul 16 '17 at 15:19
It's basically the same one you posted, just with the HTML head part included – User3434343443 Jul 16 '17 at 15:59
So one way you could do this: you can change the `display: flex;` on line 48 in your CodePen CSS to `display: flex !important;` Also, in order to center your brand logo, I would change line 39 in your CodePen css to `padding: 3rem 1.5rem 0 !important;` I think what's happening is that your bootstrap cdn's are taking precedence over some of your styles. I love Bootstrap, but this can be one of the tricky things about it. Even better would be to give these elements unique ids, and use those ids in the CSS. `!important` works, but it shouldn't be overused. – Dan Kreiger Jul 16 '17 at 16:18
Thank you I am gonna try that :) – User3434343443 Jul 16 '17 at 16:21
Wow, it finally works! Thank you so much for all your effort! – User3434343443 Jul 16 '17 at 16:24
No problem :) I'm glad it helped. – Dan Kreiger Jul 16 '17 at 16:28

score 1 · Answer 2 · answered Jul 16 '17 at 12:36

1

I think I get the problem(may be)... use this css code...I think this is exactly what you need

.navbar.navbar-default {
        min-height: 80px;
    }
    .container-fluid {
        margin-top: 15px;
    }

to change font-size change it differently for .navbar-header and .navbar-brand

answered Jul 16 '17 at 12:36

BaDsHahSHIVAM

136
4

This centered the content, but it just moved it down, so there is a gap at the top https://gyazo.com/e7d633d3c67acab1a678fc8417a7d3df – User3434343443 Jul 16 '17 at 12:45

Bootstrap Navbar Content Not Centered

2 Answers2