Bootstrap: Hamburger Icon is always there

Question

i'm on my first bootstrap site and I have a problem. My Navigation is always collapsed, even in screen size. The hamburger icon works, but it should only be there in mobile-screen-sizes.

Can everyone help me?

 <div class="header-nav clearfix">
           <nav class="navbar navbar-fixed-top">
              <button class="navbar-toggler" 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>
              <div class="navbar-collapse collapse " id="navbarSupportedContent">
                 <ul class="nav">
                    <li class="nav-item">
                       <a class="nav-link" href="#">Über uns</a>
                    </li>
                    <li class="nav-item">
                       <a class="nav-link" href="#">Karriere</a>
                    </li>
                    <li class="nav-item">
                       <a class="nav-link" href="#">Downloads</a>
                    </li>
                    <li class="nav-item nav-item-gruen">
                       <a class="nav-link" href="#">Kontaktieren Sie uns!</a>
                    </li>
                 </ul>
              </div>
           </nav>
        </div>

it will be better if you add a fiddle of your code – Mr. Pyramid Nov 10 '17 at 11:40 — Mr. Pyramid, Nov 10 '17 at 11:40

score 0 · Answer 1 · answered Nov 10 '17 at 10:57

0

Put this code into your Header and try again:

<meta name="viewport" content="width=device-width" />    
<meta http-equiv="X-UA-Compatible" content="IE=edge">

answered Nov 10 '17 at 10:57

Alexander Menger

95
2
14

No, unfortunately, nothing has changed. – nanny90 Nov 10 '17 at 11:22

score 0 · Answer 2 · answered Nov 10 '17 at 12:18

okay, I didnt do this before. Hope it is right.

/* Header */
header{border-bottom:30px solid rgba(0,0,0,0.8);min-height:280px;}


/* Navigation */

.header-nav {background:rgba(0,0,0,0.8);}
.header-nav .nav {float:right;}
.nav li a{display:inline-block;padding: 25px 60px; color:#fff;}
.nav-item-gruen{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8eb73f+27,639d24+100 */
background: #8eb73f; /* Old browsers */
background: -moz-linear-gradient(top,  #8eb73f 27%, #639d24 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #8eb73f 27%,#639d24 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #8eb73f 27%,#639d24 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8eb73f', endColorstr='#639d24',GradientType=0 ); /* IE6-9 */
}

<header>
         <div class="container-fluid  position-fixed">
            <div class="logo-box">
               <img src="images/logo-idh.jpg" alt="">
            </div>
    <div class="header-nav clearfix">
               <nav class="navbar navbar-fixed-top">
                  <button class="navbar-toggler" 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>
                  <div class="navbar-collapse collapse " id="navbarSupportedContent">
                     <ul class="nav">
                        <li class="nav-item">
                           <a class="nav-link" href="#">Über uns</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Karriere</a>
                        </li>
                        <li class="nav-item">
                           <a class="nav-link" href="#">Downloads</a>
                        </li>
                        <li class="nav-item nav-item-gruen">
                           <a class="nav-link" href="#">Kontaktieren Sie uns!</a>
                        </li>
                     </ul>
                  </div>
               </nav>
            </div>         
           
         </div>
      </header>

Bootstrap: Hamburger Icon is always there

2 Answers2