Results 1 to 2 of 2

Thread: First timer with Bootstrap

  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    1

    First timer with Bootstrap

    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


    Code:
    <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

    Code:
    .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;
    }

  2. #2
    Junior Member
    Join Date
    Mar 2015
    Location
    London
    Posts
    8
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •