CODEWITHSUNDEEP
htmlcssgraphicstwitter-bootstrapweb
Richard
Richard

Reputation: 6116

Bootstrap Nav Bar Resize

I'm using bootstrap to build a simple website but I'm having some trouble with the height of the navbar. So the nav bar looks fine when the titles aren't too long like this:
enter image description here

However, if one of the link name's gets too long then the nav bar looks like this:
enter image description here

This is my HTML code:

<div class="container">
    <div class="masthead">
        <div class="navbar">
            <div class="navbar-inner">                    
                <ul class="nav">
                    <li class="active"><a href="../Home.html">Home</a></li>
                    <li><a href="../About.html">About</a></li>
                    <li><a href="../Officers.html">Officers</a></li>
                    <li><a href="../Join.html">Join</a></li>
                    <li><a href="../Calendar.html">Calendar</a></li>
                    <li><a href="../Contact.html">Contact</a></li>
                    <li><a href="../WSP.html">Wsdf asdkfjlaksjdf laksjdflkjasdf</a></li>
                    <li><a href="../Members.html">Members</a></li>
                </ul>                    
            </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->
    </div><!-- /.masthead -->
</div><!-- /.container -->

My CSS looks like this:

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}
.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}
.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}
.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

How do I adjust my CSS code to make the navbar graphics adjust properly?

Upvotes: 0

Views: 2816

Answers (1)

Manish Sharma
Manish Sharma

Reputation: 1720

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
    vertical-align:middle;
}
.navbar .nav li a {
    font-weight: bold;
    text-align: center;

}
.navbar .nav li:first-child {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

.navbar .nav > .active {
  color: #555555;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

try this one may solve your problem

Upvotes: 2

Related Questions