0

I'm in the process of updating my company's website from Bootstrap 2 to Bootstrap 3 and have what I assume is a relatively simply issue to resolve; the menu items are not clearing the logo in the navbar. Pulling the menu items to the right does not seem to resolve the issue, as when the menu collapses the items are still to the right.

Here is the link to the site in development.

Here is the code for the nav:

<div class="navbar-wrapper">
  <div class="container">

    <div class="navbar navbar-inverse navbar-static-top wrapper" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="index.html"><img src="img/tsp-logo.png" class="logo img-responsive" alt="Third Sector Publishing" /></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html#about"><i class="fa fa-question-circle"></i> About</a></li>
            <li class="active"><a href="#"><i class="fa fa-users"></i> Team</a></li>
            <li class="scroll"><a href="#contact"><i class="fa fa-envelope-o"></i> Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-book"></i> Products <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="scroll"><a href="#cww">Canadian Who's Who</a></li>
              <li class="scroll"><a href="#cdg">Canadian Donor's Guide</a></li>
              <li class="scroll"><a href="#cc">CharityCAN</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
Vivek Vikranth
  • 3,265
  • 2
  • 21
  • 34
Jamieson
  • 5
  • 5

4 Answers4

1

you should remove the position:absolute on .logo on line 76 of your style.css stylesheet.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • +1 indeed this is also another case, if it is required to reposition the logo i would suggest `position:relative`. – melc Dec 16 '13 at 16:01
0

It is required to add something like,

.navbar-brand {
  width: 386px;/*width of the logo image*/
}

In order for the navbar-brand link to occupy the necessary space.

melc
  • 11,523
  • 3
  • 36
  • 41
0

on line 7 of bootstrap.min.css you need to add this css style on this class .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {float: right; margin: 0 14px 0 0;}

OR you can add this class name on navbar "pull-right" which has been already defined on the bootstrap css

Muhammad Owais
  • 1
  • 1
0

http://jsbin.com/OtamALu/1/

You want the logo to not knock into the navigation.

   <div class="navbar navbar-inverse navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
      <div class="logo-wrapper">
      <a href="index.html"><img src="http://www.accomplicated.ca/webdesign/TSP-3/img/tsp-logo.png" class="logo img-responsive" alt="Third Sector Publishing" /></a>
      </div>
    
    </div>
    <div class="navbar-collapse collapse navbar-right">
      <ul class="nav navbar-nav">
        <li><a href="index.html#about"><i class="fa fa-question-circle"></i> About</a></li>
        <li class="active"><a href="#"><i class="fa fa-users"></i> Team</a></li>
        <li class="scroll"><a href="#contact"><i class="fa fa-envelope-o"></i> Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-book"></i> Products <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="scroll"><a href="#cww">Canadian Who's Who</a></li>
          <li class="scroll"><a href="#cdg">Canadian Donor's Guide</a></li>
          <li class="scroll"><a href="#cc">CharityCAN</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS:

  .logo {padding-right:80px;min-with:200px;}
  .logo-wrapper {max-width:400px;padding-top:8px}
Community
  • 1
  • 1
Christina
  • 34,296
  • 17
  • 83
  • 119
  • Thank you for your response. You've been extremely helpful. – Jamieson Dec 16 '13 at 17:37
  • Your answer was the most helpful. – Jamieson Dec 16 '13 at 20:09
  • Yeah, you're going to have to tweak it. Generally, I make the image itself no larger than the largest size on desktop and then add the padding and stuff so it won't hit it. Actually, I don't use images for logos, I use svg since retina makes images blurry. – Christina Dec 16 '13 at 20:12