Navbar help?-covering content

When minimize my page, my navbar covers content, any help?

If you’re wanting it to collapse then you need to include all the bootstrap collapsible class.

1 Like

Here’s the bootstrap example:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>
1 Like

To actually make a menu collapsible when the browser window is under a certain width, you should use the following Bootstrap classes: .collapse and .navbar-collapse. So, wrapping your links in a div with the aforementioned classes should hide the menu.

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#abt">About</a></li>
    <li><a href="#pex">Projects</a></li>
    <li><a href="#ctc">Contact</a></li>
  </ul>
</div>

Now you’ll have hidden the menu, but I’m almost certain you’ll want a way to show/hide the menu when you need to. Take a look at the following link which should teach you what you need and give you a better understanding of how navbars in Bootstrap work: https://getbootstrap.com/components/#navbar.

2 Likes

I used this code, but when I click the button it does nothing.

Are you including the bootstrap javascript on your page? The collapsed menus won’t work otherwise. Bootstrap also requires jQuery by default.

https://codepen.io/dms909/pen/jwLPRL Currently this is my code.

I think the issue might be that you’re using v3 of Bootstrap, which I’m not sure (I’ve only read the documentation for v4 navbars) support what you want in the way you’re using it.

Maybe try changing your JQuery/javascript settings to use v4?

Replace your nav with this:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Dylan Smith</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#abt">About</a></li>
        <li><a href="#pex">Projects</a></li>
        <li><a href="#ctc">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Thanks man! That fixed it!

I have one more question, how would I change the side of the links from the left to the right?

Add the text-right class to the <ul></ul> tag that wraps your links.

<ul class="nav navbar-nav text-right">
...
...
...
<\ul>

Hopefully this is what you’re looking for.

Edit:

You could also do this same thing using CSS.

li{
    text-align: right;
}

Or using a class.

.navbar-nav{
    text-align: right;
}

And least I have found de solution for my problem :grinning: reading this post. thanks!