Solved

Bootstrap vertical align nav links when some links wrap to second line

Posted on 2015-02-16
2
427 Views
Last Modified: 2016-02-25
Back again with another BootStrap question.
I have a long navigation menu.  It stretches the full width of the navigation row. For short links, this is great, but it wraps longer links, so that the height of the nav bar is thrown off.  

Here's my css:
.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  background-color: transparent;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Customize the nav-justified links to be fill the entire space of the .navbar */
.main_nav{
	width:100%;
	background-color: #0b74ee;
}
.nav-justified {
  padding-top:0px;
  margin-left:auto;
  margin-right:auto;
  border-radius: 0px;
  width:1000px;
  height:50px;
}

.nav-justified > li {
	  height:50px;
	  vertical-align:middle !important;	
}
.nav-justified > li > a {

  margin-bottom: 0;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background-color: #0b74ee; /* Old browsers */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0b74ee), to(#oe407d));
  background-image: -webkit-linear-gradient(top, #0b74ee 0%, #oe407d 100%);
  background-image:      -o-linear-gradient(top, #0b74ee 0%, #oe407d 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #0b74ee), to(#oe407d));
  background-image:         linear-gradient(top, #0b74ee 0%, #oe407d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b74ee', endColorstr='#oe407d',GradientType=0 ); /* IE6-9 */
  background-repeat: repeat-x; /* Repeat the gradient */
}

.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
  background-color: #0b74ee;
}
.nav-justified > li:first-child > a {
  border-radius: 0;
}
.nav-justified > li:last-child > a {
  border-bottom: 0;
  border-radius: 0;
}

ul.nav a:hover { background-color: #f13323 !important; }
.main_nav{
	margin-left:auto;
	margin-right:auto;	
}
@media (min-width: 768px) {
  .nav-justified {
    max-height: 50px;
  }
  .nav-justified > li > a {
    border-right: 1px solid #d5d5d5;
    border-left: 1px solid #fff;
  }
  .nav-justified > li:first-child > a {
    border-left: 0;
  }
  .nav-justified > li:last-child > a {
    border-right: 0;
  }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .masthead,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
}

Open in new window


And my HTML

<!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="">

    <title>Justified Nav Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/justified-nav.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="css/theme.css">
  </head>

  <body>
<div class="row" style="margin-top:0px; padding-top:0px; min-height:100px; background-color:#000000;">
      	<div class="col-md-12" style="color:#ffffff;"><img src="images/logos/logo.jpg"></div>
      </div>
    
	  <div class="row">
        <nav class="main_nav">
          <ul class="nav nav-justified">
            <li class="active"><a href="#">link 1</a></li>
            <li><a href="#">long link 1</a></li>
            <li><a href="#">long link 2</a></li>
            <li><a href="#">long link 3</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <li><a href="#">link 4</a></li>
            <li><a href="#">link 5</a></li>
            <li><a href="#">link 6</a></li>
            <li><a href="#">long link 4</a></li>
          </ul>
        </nav>
      </div>
<div class="container">
      <!-- Jumbotron -->
      <div class="jumbotron">
        <h1>Marketing stuff!</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
      </div>

      <!-- Example row of columns -->
      <div class="row">
        <div class="col-lg-4">
          <h2>Safari bug warning!</h2>
          <p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
        </div>
        <div class="col-lg-4">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
       </div>
        <div class="col-lg-4">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
          <p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
        </div>
      </div>

      <!-- Site footer -->
      <footer class="footer">
        <p>© Company 2014</p>
      </footer>

    </div> <!-- /container -->


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Open in new window



I have the links vertically centered, but borders don't go all the way to the top of the div.  Here's a screenshot:
nav-link-goofy.jpg
My goal is to have the links vertically centered with borders that extend to the top and bottom of the .main_nav div.
Any suggestions on what I can try?  I added vertical-align, but that didn't cut it.

Thank you for your help!
0
Comment
Question by:slightlyoff
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40612610
You need to size the boxes for the largest case, not the normal.  As for vertical centering to do that with list elements you need scripting to calculate the values and position the text, or you can try the CSS calc() function with vh as a unit of measure, but that is probably not compatible with restrictive junk like bootstrap.

Cd&
0
 
LVL 1

Author Closing Comment

by:slightlyoff
ID: 40617106
I ended up just writing the HTML, CSS and stuff from scratch.

Thanks for your help!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to use embargo Date/time in php 29 38
HTML &#0153 2 17
Why a span is lower 2 20
Little bit of help styling my heading 3 20
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question