Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2015-02-16
2
437 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
tiny glitch in my main slider 3 38
Diminish Pop-up  in 3 seconds 7 44
Html input text color the frame line 2 20
Wordpress Hacked 1 18
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

809 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