Bootstrap navbar overlaps logo?

FRONT END FOR NavBarBootstrap navbar overlaps logo?

<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>

Когда я уменьшить размер Google Chrome категории и другие вещи перекрывается логотип на width:1502px Я попробовал этот CSS

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

IMAGE: IMAGE OF NAVBAR

источник

2016-12-28 prashant dhuri

Можете ли вы разместить изображение или пример? –

В чем проблема? Все хорошо для меня. –

Пожалуйста, проверьте изображение @JustinSkiles –

Потому что у вас так много ссылок внутри вашего нав и в связи с увеличением размера шрифта он переполнен, так как там просто не хватает места, тем меньше видовой экран становится.

Вы можете изменить точку останова, которую разрушает навигационная панель, кроме того, вы можете изменить свойство отображения ссылок, чтобы они обернули. Это оставит их разоблаченными дольше, но вам все равно придется свернуть навигацию раньше обычного.

Пример 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>

Пример II:Обмотанные Ссылки

.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>

источник

2016-12-28 21:45:03 vanburen

Возможно, это именно то, что вы ищете:

.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>

источник

2016-12-28 19:43:20 Cecilia

это почти сработало, но логотип добирается до малого, я хочу, чтобы он был большой –

ответ

Смежные вопросы