Уменьшить ширину меню сворачивания

В следующем коде меню при свертывании при щелчке дает раскрывающееся меню полной ширины, как и на странице. Уменьшить ширину меню сворачивания

  <div class="row"> 

       <div class="col-sm-8"> 

        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
        <!-- navbar-header --> 


        <nav class="collapse navbar-collapse navigation" id="navbar-collapse"> 

         <ul class="nav navbar-nav menu"> 
          <li><a href="/">Home</a></li> 
          <li><a href="features.html">Features</a></li> 
          <li><a href="lifestyle.html">Lifestyle</a></li> 
          <li><a href="travel.html">Travel</a></li> 
          <li><a href="music.html">Music</a></li> 
          <li><a href="about.html">About</a></li> 
          <li><a href="contact.html">Contact Me</a></li> 
         </ul> 

        </nav> 

       </div> 
       <!-- navbar-collapse --> 

       <div class="col-sm-4 navigation" id="social-icons"> 

        <ul class="menu"> 

         <a href=""><i class="fa fa-facebook"></i></a> 
         <a href=""><i class="fa fa-twitter"></i></a> 
         <a href=""><i class="fa fa-instagram"></i></a> 
         <a href=""><i class="fa fa-pinterest"></i></a> 
         <a href=""><i class="fa fa-heart"></i></a> 
         <a href=""><i class="fa fa-google-plus"></i></a> 
         <a href=""><i class="fa fa-tumblr"></i></a> 

        </ul> 
       </div> 
       <!-- social-icons --> 
      </div> 
      <!-- row --> 
     </div> 
     <!-- container --> 
    </nav>

Есть ли способ, чтобы уменьшить ширину выпадающего меню таким образом, что есть некоторое пустое пространство на своих сторонах?

Редактировать: Вот изображение того, чего я хочу достичь.

JS Fiddle: https://jsfiddle.net/9yyrnmuy/

источник

2017-01-04 Lucky

Это ваш «навигатор». Предполагается, что он должен сделать эту ширину. –

Я только что редактировал свой вопрос, так как думал, что, возможно, информации недостаточно. – Lucky

Итак, вы хотите больше дополнений с обеих сторон, чтобы меню было более сосредоточено рядом с рухнувшим меню и значками социальных сетей? – KujAslani

Существует другой способ сделать это с помощью CSS, Я только что добавил эти классы

.navbar-inverse { background-color:transparent; } 
#navbar-collapse { 
    background: #222 ; 
    float: left; 
    width:100%; 
} 
.navbar-inverse::after { 
    background: #222 none repeat scroll 0 0; 
    content: ""; 
    height: 50px; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 
.navbar-inverse { background-color:transparent; border-color:transparent; }

Проверки с сниппета

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<style> 
 
/*custom for submenu here*/ 
 
    
 
#navigation .container { 
 
    height: 48px; 
 
} 
 

 
.navbar-inverse .navbar-nav>li { 
 
    margin: 0; 
 
    margin-right: 22px; 
 
} 
 

 
#social-icons { 
 
    line-height: 48px; 
 
    display: inline-block; 
 
} 
 

 
.fa { 
 
    color: #e6c55d; 
 
    margin-right: 11px; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 

 
.fa:hover { 
 
    color: #fff; 
 
} 
 

 
.navbar-toggle { 
 
    background: #232123; 
 
    float: left; 
 
    border: none; 
 
} 
 

 
#social-icons { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 15px; 
 
} 
 

 
.navbar-inverse .navbar-nav>li>a { 
 
    padding-top: 0; 
 
    padding: 0; 
 
    font-family: "Open Sans", sans-serif; 
 
    font-size: 11px; 
 
    font-weight: 400; 
 
    letter-spacing: 2px; 
 
    color: #fff; 
 
    line-height: 48px; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
} 
 

 

 
@media (max-width: 991px) { 
 
    .navbar-header { 
 
     float: none; 
 
    } 
 
    .navbar-toggle { 
 
     display: block; 
 
    } 
 
    
 
    .navbar-collapse.collapse { 
 
     display: none!important; 
 
    } 
 
    .navbar-nav { 
 
     float: none!important; 
 
     margin-top: 0; 
 
     margin-bottom: 3px; 
 
     
 
    } 
 
    .navbar-nav>li { 
 
     float: none; 
 
    } 
 
    .navbar-nav>li>a { 
 
     margin: -10px; 
 
     margin-left: 20px; 
 
    } 
 
    .navbar-text { 
 
     float: none; 
 
    } 
 

 
    
 
    .navbar-collapse.collapse.in { 
 
     display: block!important; 
 
    } 
 
    .collapsing { 
 
     overflow: hidden!important; 
 
    } 
 
\t .navbar-inverse { background-color:transparent; border-color:transparent; } 
 
#navbar-collapse { 
 
    background: #222 ; 
 
    float: left; 
 
    width:100%; 
 
} 
 
    .navbar-inverse { 
 
    border-color:transperant; 
 
} 
 
.navbar-inverse::after { 
 
    background: #222 none repeat scroll 0 0; 
 
    content: ""; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 
} 
 

 
</style> 
 
<nav class="navbar navbar-fixed-top navbar-inverse"> 
 
      <div class="container"> 
 

 
       <div class="row"> 
 

 
        <div class="col-sm-8"> 
 

 
         <div class="navbar-header"> 
 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> 
 
           <span class="sr-only">Toggle navigation</span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
           <span class="icon-bar"></span> 
 
          </button> 
 
         </div> 
 
         <!-- navbar-header --> 
 

 

 
         <nav class="collapse navbar-collapse navigation" id="navbar-collapse"> 
 

 
          <ul class="nav navbar-nav menu"> 
 
           <li><a href="/">Home</a></li> 
 
           <li><a href="features.html">Features</a></li> 
 
           <li><a href="lifestyle.html">Lifestyle</a></li> 
 
           <li><a href="travel.html">Travel</a></li> 
 
           <li><a href="music.html">Music</a></li> 
 
           <li><a href="about.html">About</a></li> 
 
           <li><a href="contact.html">Contact Me</a></li> 
 
          </ul> 
 

 
         </nav> 
 

 
        </div> 
 
        <!-- navbar-collapse --> 
 

 
        <div class="col-sm-4 navigation" id="social-icons"> 
 

 
         <ul class="menu"> 
 

 
          <a href=""><i class="fa fa-facebook"></i></a> 
 
          <a href=""><i class="fa fa-twitter"></i></a> 
 
          <a href=""><i class="fa fa-instagram"></i></a> 
 
          <a href=""><i class="fa fa-pinterest"></i></a> 
 
          <a href=""><i class="fa fa-heart"></i></a> 
 
          <a href=""><i class="fa fa-google-plus"></i></a> 
 
          <a href=""><i class="fa fa-tumblr"></i></a> 
 

 
         </ul> 
 
        </div> 
 
        <!-- social-icons --> 
 
       </div> 
 
       <!-- row --> 
 
      </div> 
 
      <!-- container --> 
 
     </nav> 
 
<!--/.nav-collapse --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

источник

2017-01-04 12:17:56

очень близко к тому, что я хочу. См. Мое редактирование и предложите способ, чтобы меню всегда находилось в центре (как показано на рисунке). – Lucky

@ Lucky попробуйте сейчас, я отредактировал свой ответ –

Это именно то, что я хотел. Спасибо огромное! Не могли бы вы объяснить, как вы это достигли? – Lucky

Вы можете добавить коллектив- класс Nav элемента управления шириной выпадающего списка

<nav class="collapse navbar-collapse navigation col-xs-6" id="navbar-collapse"> 

        <ul class="nav navbar-nav menu"> 
         <li><a href="/">Home</a></li> 
         <li><a href="features.html">Features</a></li> 
         <li><a href="lifestyle.html">Lifestyle</a></li> 
         <li><a href="travel.html">Travel</a></li> 
         <li><a href="music.html">Music</a></li> 
         <li><a href="about.html">About</a></li> 
         <li><a href="contact.html">Contact Me</a></li> 
        </ul> 

</nav> 
<div class = "col-xs-3"> SOME SIDE CONTENT </div>

источник

2017-01-04 12:11:15 user1536841

Пробовал это. Но это не работает. – Lucky

Вы можете сделать это, давая width для .navbar-collapse.in этого CSS

https://jsfiddle.net/9yyrnmuy/4/

источник

2017-01-04 12:20:03

Как я могу узнать, сколько ширины будет указано? Я хочу, чтобы меню было посередине с некоторым пространством вокруг него. См. Редактирование. – Lucky

Если не изменить HTML структуры добавить CSS

.container { 
    padding: 0; 
} 

.navbar-header { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

.navbar-collapse { 
    background: #fff; 
    padding: 0 30px; 
    border: none; 
} 

.navbar-collapse ul { 
    background: #000; 
} 

.navbar-collapse { 
    margin: 0; 
}

источник

2017-01-04 12:20:37 grinmax

Уменьшить ширину меню сворачивания

ответ

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