Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Siddharth Nasare
Siddharth Nasare
15,636 Points
Posted by Siddharth Nasare
Siddharth Nasare
15,636 Points

Navbar is popping up in vertical manner....

 <!-- navbar   -->
    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary ">
      <div class="container">

          <ul class="nav navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#home">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
            </li>
          </ul>
          <a class="navbar-brand  ml-auto hidden-xs-down" href="https://www.facebook.com/nasaresiddharth">Presented By Siddharth Nasare</a>
        </div>


    </nav>

    <!-- /navbar   -->

Whenever I reduce my window size, navbar popping up in a vertical manner. Anyone know the solution?

This problem is from Bootstrap 4 course.

Amber Cyr
Amber Cyr
19,699 Points

A snapshot of your HTML is most likely not going to help solve this problem since it is a display issue. What does the CSS for the navbar look like? When you say vertical, do you mean the links of the navbar are stacking on top of each other, or the navbar is popping up on the side of the screen?

4 Answers

Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points
Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points

ah ok, didn't get your question earlier.

Stacking nav items in mobile browser is a normal bootstrap behavior. You should have said it before that you want to override this normal behavior.

Here is the easy solution to keep navbar horizontal for all screen sizes.

<!-- navbar   -->
    <nav class="navbar fixed-top navbar-toggleable-xl navbar-inverse bg-primary ">
      <div class="container">

          <ul class="nav navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#home">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
            </li>
          </ul>
          <a class="navbar-brand  ml-auto hidden-xs-down" href="https://www.facebook.com/nasaresiddharth">Presented By Siddharth Nasare</a>
        </div>


    </nav>

    <!-- /navbar   -->

Here we have just changed navbar-toggleable-md to navbar-toggleable-xl to keep menu horizontal for all screen sizes.

There is another method to achieve this which involves CSS code and playing with flexbox properties of navbar. (If you want to go in that direction.)

Thx

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points

Thank you very much, Muhammad.

You are awesome!!!!

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points

There is no need of CSS elements, as I am doing this by BootStrap 4. Popping up vertically means, the links of the navbar are stacking on top of each other instead of behaving like inline-block elements.

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points

My full code for this project is,

bootstrap 4

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- 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>

    <!-- navbar   -->
    <nav class="navbar navbar-fixed-top navbar-toggleable-md navbar-inverse bg-primary ">
      <div class="container">
        <div class="navbar-collapse collapse" id="navbarNav">
          <ul class="nav navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#home">Home </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#speakers">Speakers</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#schedule">Schedule</a>
            </li>
          </ul>
          <a class="navbar-brand  ml-auto hidden-xs-down" href="https://www.facebook.com/nasaresiddharth">Presented By Siddharth Nasare</a>
        </div>
      </div>

    </nav>

    <!-- /navbar   -->

    <!--  jumbotron  -->
    <div class="jumbotron jumbotron-fluid bg-success text-white">
      <div class="container text-sm-center">
        <h1 class="display-3">Full Stack Conf</h1>
        <p class="lead">A One-day Conference About All Things JavaScript!!!</p>
      </div>
    </div>

    <!--  /jumbotron  -->



    <div class="container pt-5">
      <!--about-->
      <div class="row">

        <div class="col-lg-4 push-lg-4">
         <h3 class="mb-4">About Full Stack Conf</h3>
         <img class="mb-1 img-fluid rounded hidden-xs-down" src="img/pdx.jpg" alt="Portland">
         <p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
         <p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
        </div>
        <div class="col-lg-4 pull-lg-4">
          <h3 class="mb-4">Expert Speakers</h3>
          <p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
          <p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
          <p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
        </div>
        <div class="col-lg-4">
          <h3 class="mb-4">What You'll Learn</h3>
          <ul>
            <li><strong>MongoDB</strong>: NoSQL database</li>
            <li><strong>Angular</strong>: JavaScript framework</li>
            <li><strong>Express</strong>: Framework for Node</li>
            <li><strong>Node.js</strong>: JavaScript environment</li>
            <li><strong>ES2015</strong>: Latest version of JavaScript</li>
            <li><strong>Babel</strong>: JavaScript compiler</li>
          </ul>
        </div>
      </div>  <!--/about-->
        <h1 class="display-4 text-center my-5 text-muted">Speakers</h1>
      [Specker bios go here]
      <h1 class="display-4 text-center my-5 text-muted">Schedule</h1>
      [Conference schedule goes here]

      <!-- signup form -->
      <hr>
      <div class="row py-4 text-muted">
        <div class="col-md-6 col-xl-5">
          <p><strong>About Treehouse</strong></p>
          <p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
        </div>
        <div class="col-md-6 col-xl-5 offset-xl-2">
          <p><strong>Stay up-to-date on Full Stack Conf</strong></p>
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Email">
            <span class="input-group-btn">
              <button class="btn btn-primary" type="button">Sign up</button>
            </span>
          </div>
        </div>
      </div>
      <hr><!-- /signup form -->
    </div> <!--/container-->



    <!-- jQuery first, 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>
Matthew Garza
Matthew Garza
26,312 Points
Matthew Garza
Matthew Garza
26,312 Points

I'm not the best at bootstrap but it looks like your links are acting like that because of your <div class="navbar-collapse collapse" id="navbarNav">. Are you trying to collapse the links or the nav bar itself? Because you are toggleing / collapsing both. Hope this helps : )

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points 
<div class="navbar-collapse collapse" id="navbarNav">

If I remove above line from the navbar section, my navbar is showing single horizontal line and all the nav links are disappearing from the top when I reduce the window size.

Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points
Muhammad Ehsan Hanif
Muhammad Ehsan Hanif
8,236 Points

Your code for the navbar is not complete. You are missing the following lines of code

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

When you reduce window size your menu tries to go to the the mobile menu version. But instead of showing Hamburgner menu (3 horizontal lines) they are vertically stacked because the mobile menu code is missing.

You better check Bootstrap 4 documentation about navbar >> Navbar Bootstrap

Siddharth Nasare
Siddharth Nasare
15,636 Points
Siddharth Nasare
Siddharth Nasare
15,636 Points

I don't want to put a button in a mobile window, instead of that I am hiding my "presented by"-navbar-brand link to make some space for navigation options in small size windows. I tried everything but it's not working......

I want to make navbar like (https://teamtreehouse.com/library/building-a-navbar) video.