How to center vertically menu items on nav bar?

I try to center vertically menu items "TEST 1","TEST 2" and "BRAND" without successful. I have tried vertical-align,margin-top and bottom.

I mean, I don't want to put one on top of another, just center between margin top and bottom of the nav bar.

I really appreciate if somebody can help me.

HTML

<nav class="navbar navbar-default">
      <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-
    toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a href="index.html" class="navbar-brand">BRAND</a>
   </div>
   <div class="collapse navbar-collapse" id="menu-collapse">
   <ul class="nav navbar-nav navbar-center">
    <li><a id="menu-right" href="#">TEST 1</a></li>
    <li><a id="menu-right" href="#">TEST 2</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><button class="btn btn-primary">Start Now</button></a></li>
    <li><a href="#"><button class="btn btn-primary">Member Login </button></a>
     </li>
     </ul> 
      </div>
     </div>
     </nav>

CSS

    #menu-right:hover {
        background: #5d5dc9;
        color:#fff;
    }

    #menu-right {
        color:#337ab7;
        text-transform: uppercase;
        vertical-align: middle;
    }

ul {
  vertical-align: middle;
}


    .button-margin {
        border: 1px solid;
    }

    .navbar-brand {
        margin-right: 200px;
    }


    .navbar {
        margin-bottom: 0;
        font-family: 'Raleway', sans-serif;
        font-size: 1.5em;
        font-weight: 800;
        text-transform: uppercase;
    }

Here is a link to codepen website test : https://codepen.io/fdcoder81/pen/Kymyyj

Thank you very much

1 answer

  • answered 2017-11-12 20:12 Luckyfella

    If you set the line-height of your a tags to the height of the navbar it should be aligned vertically centered.

    Btw both of your:

    <a id="menu-right" href="#">
    

    occurences should have classes - you can't have the same id assigned more than one element.

    Take

    <a class="menu-right" href="#">
    

    And change in your css accordingly to

    .menu-right
    

    EDIT: I played around with your codepen stuff - I don't know if that's the way to go when using bootstrap but it works.

    Your HTML:

        <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TEST</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Raleway:400,800" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    
    <body>
        <header>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html" class="navbar-brand">BRAND</a>
                    </div>
                    <div class="collapse navbar-collapse" id="menu-collapse">
                        <ul class="nav navbar-nav navbar-center">
                            <li>
                                <a class="menu-right" href="#">TEST 1</a>
                            </li>
                            <li>
                                <a class="menu-right" href="#">TEST 2</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#">
                                    <button class="btn btn-primary">Start Now</button>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <button class="btn btn-primary">Member Login </button>
                                </a>
                            </li>
    
                        </ul>
                    </div>
    
    
                </div>
    
    
    
            </nav>
    
        </header>
    
        <!--<script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>-->
    </body>
    
    </html>
    

    Your CSS:

    .menu-right:hover {
        background: #5d5dc9;
        color: white;
    }
    
    .menu-right {
        color:#337ab7;
        text-transform: uppercase;
        line-height: 54px;
    }
    .button-margin {
        border: 1px solid;
    }
    
    .navbar > .container-fluid .navbar-brand {
        margin-right: 200px;
        line-height: 54px;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    
    .navbar {
        margin-bottom: 0;
        font-family: 'Raleway', sans-serif;
        font-size: 1.5em;
        font-weight: 800;
        text-transform: uppercase;
    }
    .navbar-default .navbar-nav>li>a {
        line-height: 54px;
        padding-top: 0;
        padding-bottom: 0;
    }