CODEWITHSUNDEEP
twitter-bootstrapnavbarfixedbootstrap-4twitter-bootstrap-4
BorangeOrange1337
BorangeOrange1337

Reputation: 303

Bootstrap NavBar - I fix the navigation bar, but can no longer see links?

I'm messing around with bootstrap and just trying to get a general sense of some of the basic features. I'm messing around with navbars and have managed to make my navbar fixed on the top of my page, but when I go to full screen my window I can no longer see the links in my navbar. I can only see the drop down button. I am following all of the info on the bootstrap webpage itself. Anyone know why?

https://v4-alpha.getbootstrap.com/components/navbar/

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>


<nav class="navbar fixed-top navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class = 'container'>
dsfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf

sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
</div>

<div class = 'container'>
dsfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf

sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
</div>
<div class = 'container'>
dsfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf

sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv

sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
</div>


    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

Upvotes: 0

Views: 136

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

The Bootstrap 4 navbar is mobile by default unless explicitly overridden using one of the navbar-toggleable-* classes. Since there is none specified in your navbar, it's always collapsed/mobile. If you want it to show the links on wider screens, specify the appropriate range, such as: navbar-toggleable-md...

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Demo: http://www.codeply.com/go/IoTTQGpOXy

Upvotes: 2

Related Questions