bootstrap navbar überlappt logo?

Question

Front-End für NavBar

<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand"> 
     <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" /> 
    </a> 
    </div> 
    <div class="collapse navbar-collapse" id=".navbar-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
      <h4>CATEGORY<b class="caret"></b></h4> 
     </a> 
     <ui>...........</ui> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>SHIRT</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>PANTS</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>SHOE</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>FASHION</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>PAPER QULING</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>TERRACOTA</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>MEENAKARI</h4> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <h4>TRADITIONAL</h4> 
     </a> 
     </li> 
     <li> 
     <a></a> 
     </li> 
    </ul> 
    </ul> 
    </div> 
    <br /> 
</nav> 

Wenn ich eine Größe von Google verringern die Kategorie Chrom und andere Sachen überlappt Logo auf width:1502px Ich habe versucht, dieses css

@media (max-width:1502px){ 
    .navbar-brand { 
    height: 80px; 
    } 
    .navbar { 
    background-color: #ccc; 
    } 
    .navbar-toggle { 
    margin-top: 25px; 
    } 
} 

BILD: IMAGE OF NAVBAR

Answer 1

Weil Sie so viele Links in Ihrem nav hast und aufgrund der erhöhten Schriftgröße es einfach, da ist überfüllt ist nicht genug Platz, desto kleiner ist das Ansichtsfenster bekommt.

Sie können den Haltepunkt ändern, den die Navigationsleiste minimiert, außerdem können Sie die Anzeigeeigenschaft der Verknüpfungen so ändern, dass sie umbrochen werden. Dadurch bleiben sie länger ungeschützt, aber Sie müssen das Navigationsgerät früher als normal reduzieren.

Beispiel I:

.navbar.navbar-tall { 
 
    background-color: white; 
 
} 
 
.navbar.navbar-tall .navbar-nav > li > a { 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 
.navbar.navbar-tall .navbar-brand { 
 
    padding-top: 5px; 
 
} 
 
.navbar.navbar-tall .navbar-brand img { 
 
    height: 90px; 
 
} 
 
@media (min-width: 1505px) { 
 
    .navbar.navbar-tall .navbar-nav > li > a { 
 
    line-height: 70px; 
 
    } 
 
} 
 
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/ 
 

 
@media (max-width: 1504px) and (min-width: 768px) { 
 
    .navbar.navbar-fixed-bottom .navbar-collapse, 
 
    .navbar.navbar-fixed-top .navbar-collapse { 
 
    max-height: auto; 
 
    overflow-x: visible; 
 
    } 
 
} 
 
@media (max-width: 1504px) { 
 
    .navbar .navbar-header { 
 
    float: none; 
 
    min-height: 100px; 
 
    } 
 
    .navbar .navbar-left, 
 
    .navbar .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar .navbar-right { 
 
    margin-right: 0px; 
 
    } 
 
    .navbar .navbar-right~.navbar-right { 
 
    margin-right: 0; 
 
    } 
 
    .navbar .navbar-toggle { 
 
    display: block; 
 
    margin-top: 32.5px; 
 
    } 
 
    .navbar .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar .navbar-collapse.collapse { 
 
    display: none!important; 
 
    overflow: visible!important; 
 
    } 
 
    .navbar .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .navbar .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar .collapse.in { 
 
    display: block !important; 
 
    overflow-y: auto; 
 
    } 
 
    .navbar .navbar-nav .dropdown-menu > li > a, 
 
    .navbar .navbar-nav .dropdown-menu > li > a:hover, 
 
    .navbar .navbar-nav .dropdown-menu > li > a:focus { 
 
    color: #777; 
 
    } 
 
    .navbar .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default navbar-tall" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand"> 
 
     <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name"> 
 
     </a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id=".navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">LINK</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">SHIRT</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">PANTS</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">SHOE</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">FASHION</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">PAPER QULING</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">TERRACOTA</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">MEENAKARI</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">TRADITIONAL</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Beispiel II:Wrapped Verbindungen

.navbar.navbar-tall { 
 
    background-color: white; 
 
} 
 
.navbar.navbar-tall .navbar-nav > li > a { 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 
.navbar.navbar-tall .navbar-brand { 
 
    padding-top: 5px; 
 
} 
 
.navbar.navbar-tall .navbar-brand img { 
 
    height: 90px; 
 
} 
 
@media (min-width: 1500px) { 
 
    .navbar.navbar-tall .navbar-nav > li > a { 
 
    line-height: 70px; 
 
    } 
 
} 
 
@media (max-width: 1499px) and (min-width: 1000px) { 
 
    .navbar.navbar-tall .navbar-nav { 
 
    display: table; 
 
    float: none; 
 
    } 
 
    .navbar.navbar-tall .navbar-nav > li { 
 
    display: table-cell; 
 
    } 
 
} 
 
/*CSS TO CHANGE COLLAPSE BREAKPOINT STARTS HERE*/ 
 

 
@media (max-width: 1499px) and (min-width: 1000px) { 
 
    .navbar.navbar-fixed-bottom .navbar-collapse, 
 
    .navbar.navbar-fixed-top .navbar-collapse { 
 
    max-height: auto; 
 
    overflow-x: visible; 
 
    } 
 
} 
 
@media (max-width: 999px) { 
 
    .navbar .navbar-header { 
 
    float: none; 
 
    min-height: 100px; 
 
    } 
 
    .navbar .navbar-left, 
 
    .navbar .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar .navbar-right { 
 
    margin-right: 0px; 
 
    } 
 
    .navbar .navbar-right~.navbar-right { 
 
    margin-right: 0; 
 
    } 
 
    .navbar .navbar-toggle { 
 
    display: block; 
 
    margin-top: 32.5px; 
 
    } 
 
    .navbar .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar .navbar-collapse.collapse { 
 
    display: none!important; 
 
    overflow: visible!important; 
 
    } 
 
    .navbar .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .navbar .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar .collapse.in { 
 
    display: block !important; 
 
    overflow-y: auto; 
 
    } 
 
    .navbar .navbar-nav .dropdown-menu > li > a, 
 
    .navbar .navbar-nav .dropdown-menu > li > a:hover, 
 
    .navbar .navbar-nav .dropdown-menu > li > a:focus { 
 
    color: #777; 
 
    } 
 
    .navbar .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<nav class="navbar navbar-default navbar-tall" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand"> 
 
     <img src="http://wallpapercave.com/wp/Tk48wK7.png" alt="Brand Name"> 
 
     </a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id=".navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">CATEGORY <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">LINK</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">SHIRT</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">PANTS</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">SHOE</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">FASHION</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">PAPER QULING</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">TERRACOTA</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">MEENAKARI</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">TRADITIONAL</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Vielleicht suchen Sie das:

.navbar-brand { 
 
    padding: 0px !important; 
 
} 
 

 
    .navbar-brand > img { 
 
     height: 100%; 
 
     width: auto; 
 
    } 
 

 
@media (min-width:768px) { 
 
    .navbar-brand { 
 
     padding: 15px 0px 0px 0px !important; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default" role="navigation" style="background-color: #FFFFFF"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
        <span class="icon-bar"></span> 
 
       </button> 
 
       <a class="navbar-brand"> 
 
        <!--start - only for test pupose--> 
 
        <img alt="Brand" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTAUTCWRBOD3bLFlPjl_MsOm3-E8X0P3prqoSNRr6B_jJluRyiy" class="img img-responsive logo"> 
 
        <!--start - only for test pupose--> 
 
        <asp:ImageButton ID="imglogo" runat="server" ImageUrl="~/Images/logo 1 copy 4-1.jpg" AlternateText="LOGO" CausesValidation="False" OnClick="imgblogo_Click" PostBackUrl="~/Home.aspx" CssClass="img img-responsive logo" /> 
 
       </a> 
 
      </div> 
 
      <div class="navbar-collapse collapse" id=".navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="dropdown"> 
 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
 
          <h4>CATEGORY<b class="caret"></b></h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>SHIRT</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>PANTS</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>SHOE</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>FASHION</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>PAPER QULING</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>TERRACOTA</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>MEENAKARI</h4> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href="#"> 
 
          <h4>TRADITIONAL</h4> 
 
         </a> 
 
        </li> 
 
        <li><a></a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </nav>