CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Flawedspirit
Flawedspirit

Reputation: 443

Bootstrap navbar CSS only partially working

I'm having this strange issue where Boostrap 3.3.6 CSS is only partially working. While I believe the site has been built properly (the right classes in the right place, etc.) it looks like some of the CSS simply doesn't exist.

This is what my navbar looks like: A not-very-useful navbar

Here is the code of my page. The links to the CSS and JS do work, and I have made no changes to either. This is a straight download from the Bootstrap site.

The problem persists if I replace the link to my server-side CSS with links to the MaxCDN's CSS files.

<!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">
  <link rel="stylesheet" href="/style/css/bootstrap.css">
  <link rel="stylesheet" href="/style/css/bootstrap-theme.css">

  <title>Test Page</title>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Test Page</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar navbar-nav navbar-left">
          <li><a href="#">Home</a>
          </li>
          <li><a href="">Link</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li><a href="">Link</a>
          </li>
          <li><a href="">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <p>Test</p>
  </div>
  <footer class="footer">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="/style/js/bootstrap.min.js"></script>
  </footer>
</body>

</html>

Upvotes: 1

Views: 503

Answers (3)

vanburen
vanburen

Reputation: 21663

You have <ul class="navbar navbar-nav navbar-left">, it should be nav, not navbar inside the ul. See Navbar. <ul class="nav navbar-nav navbar-left">

*Be aware that because you have so many links you're going to see them overflow below 992px.

Sidenote: Consider placing your scripts before your closing body tag, not inside of your footer tag.

 <footer class="footer">
 </footer>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="/style/js/bootstrap.min.js"></script>

</body>

See working example at FullPage.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Test Page</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Home</a>
        </li>
        <li><a href="">Link</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li><a href="">Link</a>
        </li>
        <li><a href="">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <p>Test</p>
</div>

Upvotes: 1

H.Saz
H.Saz

Reputation: 21

you may include external css i.e. customstyle.css:

create and upload customstyle.css to the path and style whatever output you'd like to display, for example:

ul.navbar-nav { padding: 20px 0; font-size: 12pt; color:#fff; }
ul.navbar-nav li { padding: 5px 20px; }
ul.navbar-nav li:hover { background:#fff; }

:D

Upvotes: 0

Emirhan &#214;zlen
Emirhan &#214;zlen

Reputation: 484

You're missing the class nav in

 <ul class="navbar navbar-nav navbar-left">

You should have nav instead of navbar. Proper is:

 <ul class="nav navbar-nav navbar-left">

Upvotes: 1

Related Questions