First timer with Bootstrap

[maurice78]

Hi all,

I'm trying to teach myself Bootstrap while at the same time working on a new project. I'm familiar with CSS3 enough to get by but I am a bit rusty at times.

The problem I'm perceiving is that I have my navigation setup with a logo. The navigation will not align in the middle but is instead stuck at the very top of the navbar. I have tried to introduce padding or margin, text-align: middle; and vertical-align to no avail. The margin and padding affected the pancake navigation and pushed the navigation options further down which was not good.

I've attached a screenshot to illustrate what I am experiencing. I'm simply trying to get that navigation to center within the purple bar without inducing padding or margin that will alter the mobile nav. I have also combed over the bootstrap css resource but wasn't able to find a style that would center the nav.

navproblem.jpg

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
</div>
        <div id="navbar" class="navbar-collapse collapse">
         <ul class="nav navbar-nav navbar-right">
              <li><a href="#">HOME</a></li>
              <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">ADOPT<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <li><a href="#">#</a></li>
              <li><a href="#">#</a></li>
              </ul>
              </li>
              
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">HOW TO HELP<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <li><a href="#">#</a></li>
              <li><a href="#">#</a></li>
              <li><a href="#">#</a></li>
              <li><a href="#">#/a></li>
              </ul>
              </li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">PROGRAMS<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <li><a href="#">#</a></li>
              <li><a href="#">#</a></li>
              </ul>    
              </li>
              <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">RESOURCES<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
              <li><a href="#">#</a></li>
              <li><a href="#">#</a></li>
              </ul>    
              </li>
              <li><a href="#">LINKS</a></li>
            </ul> 
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

The modified css file that overrites bootstrap.css

.navbar {
  background-color: #4c276f;
  min-height: 85px; /*default was 50px*/

  margin-bottom: 20px;
  border: 1px solid transparent;
}
/*top-menu links color*/
.navbar-default .navbar-nav > li > a {
    color: #FFF;
}
/*top-menu links color on hover*/
.navbar-default .navbar-nav > li > a:hover {
  color: #fff;
}
.navbar-inverse .navbar-nav > li > a {
  color: #fff;
  font-family: TwCenMT;
  font-size: 20px;
  text-transform: uppercase;
}
.navbar-brand {
   background: url(../fonts/logo_wht.svg);
   background-repeat: no-repeat;
   background-size: 205px 85px;
   float: left;
   height: 85px;
   width: 205px;
   padding: 0px 0px;
   line-height: 20px;
}

[Tony1978]

add this line at the very bottom of your bootstrap.css file - save , then refresh and take a screenshot if it works - so people can see I helped you - and also so that I can get my two seconds of fame on here lol

you can relax and take it easy buddy, im a newbie too - lot of people are on here actualy.

So the line will be as follows:

.navbar-nav li {padding-top:2em; padding-bottom:2em;}

try 2em first and see if its close

if not try 3em or between 2 and 3 em (i.e go up in increments of .2 ems...)

or instead of padding, use margin-top and margin-bottom

see if that works mate.

and get back to me on this if it doesn't - i know another way, a more clever way ;-)

lol

all the best

Tony