Responsive menu using Bootstrap

Asked

Viewed 3,823 times

4

I am wanting to make a fixed menu using booststrap, in such a way that it is responsive; that is, when decrease the screen the menu becomes an icon.

However, when I lower the viewport screen the icon seems to be there, but does not appear visually.

 <!-- NAV FIXED -->
 <nav class="navbar navbar-expand-lg fixed-top navegacao">
  <div class="container">
      <a href="#" class="navbar-brand"> 
          <img src="img/logo2.png" height="30">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">  
       <span class="navbar-toggler-icon text-light"></span>
     </button>

     <div id="menu" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto text-light nav-menu">
          <li class="nav-item"> 
             <a href="#header" class="nav-link text-light font-weight-bold">Item 1</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 2</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 3</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 4</a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 5 </a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 6 </a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold" id="servicos">Item 7 </a> 
          </li>
          <li class="nav-item"> 
             <a href="#" class="nav-link text-light font-weight-bold">Item 8 </a> 
          </li>
         </ul>
       </div>
   </div>

CSS code:

.navegacao {
            height: 50px;
            background-color: black;
            box-shadow: 1px 2px #54542c;
            color: aliceblue;
            text-align: center;
}

.nav-menu > li {
            padding: 0 0 0 30px;
}
twitter-bootstrap menu

  • Probably this Css of yours is causing the problem.

  • I have already removed all my external css and still does not show visually the icon, but when I step over with mouse, I see that there is the icon.

  • Which version of bootstrap you are using?

  • Bootstrap v4.1.3

2 answers

4

As you can see in the example below, the Hamburger menu is there, it turns out that your Css was overwriting that of Bootstrap. There are some classes that can help you style without having to touch Css, such as navbar-dark for example that arrow the background color of the menu bar to a dark gray tone, as you can see better here: 

.navegacao {
  box-shadow: 1px 2px #54542c;
  text-align: center;
}

.nav-menu>li {
  padding: 0 0 0 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- NAV FIXED -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navegacao">
  <div class="container">
    <a href="#" class="navbar-brand">
      <img src="img/logo2.png" height="30">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">  
       <span class="navbar-toggler-icon text-light"></span>
     </button>

    <div id="menu" class="collapse navbar-collapse">
      <ul class="navbar-nav ml-auto text-light nav-menu">
        <li class="nav-item">
          <a href="#header" class="nav-link text-light font-weight-bold">Item 1</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 2</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 3</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 4</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 5 </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 6 </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold" id="servicos">Item 7 </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light font-weight-bold">Item 8 </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

  • 1

    Good, but you don’t need to get stuck in the colors of BS4 I’ll give you an explanation too :)

  • 1

    Good Hugo, put there yes. I was afraid to confuse him.

  • hahaha, it might even be... after I’m done it might be that beginners have some difficulty with the details, but I tried to be very didactic...

3

The thing is, you stopped using the original Bootstrap color classes, like navbar-light or navbar-dark, as well as the bg-light or bg-dark etc, so its button does not appear as it only applies the color to it if it has a color class in the navbar

A way to get a color on button without getting stuck in the standard Bootstrap colors and manually put color creating a class custom.

.custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom.navbar-toggler {
  border-color: rgba(255,0,0,1);
}

If you notice you’ll see that inside the button has a span. In the button is the color of the border, and in that span inside is a background-imagem one svg that you can change the color to the color you want in stroke.

This is the default button of Bootstrap 4, it takes color along with color classes

inserir a descrição da imagem aqui

<button class="navbar-toggler custom" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">
    <span class="navbar-toggler-icon text-light"></span>
</button>

See this example to better understand.

OBS: you had put a value of height of 50px this limits the correct functioning of the navbar, so I removed in this example.

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

<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>


.navegacao {
    /* height: 50px; */
    background-color: black;
    box-shadow: 1px 2px #54542c;
    color: aliceblue;
    text-align: center;
}

.nav-menu > li {
    padding: 0 0 0 30px;
}

.custom .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom.navbar-toggler {
  border-color: rgba(255,0,0,1);
} 
</style>
</head>

<body>

<!-- NAV FIXED -->
<nav class="navbar navbar-expand-lg fixed-top navbar-light navegacao">
    <div class="container">
        <a href="#" class="navbar-brand">
            <!-- <img src="img/logo2.png" height="30"> -->
        </a>
        <button class="navbar-toggler custom" type="button" data-toggle="collapse" data-target="#menu"
            aria-controls="menu" aria-expanded="false" aria-label="Menu Colapso">
            <span class="navbar-toggler-icon text-light"></span>
        </button>

        <div id="menu" class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto text-light nav-menu">
                <li class="nav-item">
                    <a href="#header" class="nav-link text-light font-weight-bold">Item 1</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 2</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 3</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 4</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 5 </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 6 </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold" id="servicos">Item 7 </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link text-light font-weight-bold">Item 8 </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

  • Pq is the reverse. navbar-dark gets the white text and navbar-light with the dark text ?

  • @Gatodeschrödinger has no secret, just read the answer calmly, if the background eh black the text can not be black tbm correct. So if you put a black bg class the text has to be white, unless you use a screen reader, then you don’t even need CSS...

  • Ah, got it. There you are mentioning the color of the navbar and not the text. Then automatically bootstrap puts the text color that is most visible in relation to navbar color.

Browser other questions tagged twitter-bootstrap menu

You are not signed in. Login or sign up in order to post.