0

I've been banging my head on the table now for a while on this. I'm guessing there is a simple solution or hack that I'm missing. I have tried adjusting the padding and margins of the links, li's and the container around them. I want them to remain vertically centered in the navbar regardless of screen size. Right now they move up and down when the viewport is resized. My code is below: 

/* Style for Navbar/Header */
nav.navbar {
    padding: 0 1% 0 1%;
}

.navbar, 
.dropdown-menu {
    background-image: url(../images/pw_maze_black_@2X.png);
}

.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus, 
.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus {
    background-color: #656864 !important;
    color: white;
}

ul.nav.navbar-nav.navbar-right.collapse.navbar-collapse {
    background: red;
    margin-top: 5%;
}

.navbar .navbar-nav > li > a {
    font-family: "bodoni mt condensed", serif;
    font-size: 3.6vw;
    color: #a5a7a4;
    padding-top: 60px;
    padding-bottom: 60px;
}

.dropdown-menu > li > a {
    line-height: 100%;
    font-family: "bodoni mt condensed", serif;
    font-size: 2.5vw;
    color: #a5a7a4;
}

.links-container {
    
}

#logo-bar {
    width: 100%;
}

.navbar-toggle {
    background-color: #a5a7a4;
    position: static;
    padding: 2%;
    margin-top: 61px;
    margin-right: 40px;
    margin-bottom: 0;

}

div.navbar-header.nav.navbar-nav {

}

.icon-bar {
    background-color: white;
}

/* End of navbar style */
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header col-sm-4">
                <a class="" href="index.html"><img id="logo-bar" class='col-sm-4' src="images/logo-bar.svg" alt="Arrow's Edge Design Logo"></a>

               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
            </div>
            <div class="links-container">
            <ul class="nav navbar-nav navbar-right collapse navbar-collapse">
                <li><a href="index.html" class="option">Home</a></li>
                <li><a href="our-services.html" class="option">Our Services</a></li>
                <li><a href="#" class="option" data-toggle="dropdown">About Us<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="our-work.html">Our Work</a></li>
                        <li class="divider"></li>
                        <li><a href="https://www.facebook.com/arrowsedgedesign/">Facebook</a></li>
                    </ul>
                </li>
                <li><a href="contact-us.php" class="option">Contact Us</a></li>
            </ul>
            </div>
        </div>
    </nav>

    <!-- end of HTML for navbar -->
Cody DeBos
  • 23
  • 1
  • 6

1 Answers1

0

You can achieve this by changing the line-height of navbar elements.

.navbar .nav li a {
  line-height: 50px;
}

Change the 50px value for whatever you want for each viewpoint and the text should always be vertically centered.

Nebster
  • 884
  • 1
  • 11
  • 19
  • Is there a way to do this so that it works across all viewports and not have to create a bunch of media queries? – Cody DeBos Apr 19 '17 at 15:34