작은 화면 크기에서 메뉴 모음 줄 바꾸기

Question

내 중심 메뉴 모음이 바탕 화면 모드 picture attached보다 작은 화면으로 줄 바꿈되어 여러 개의 CSS 코드를 사용하여 작업하지 않은 한 줄에 메뉴 항목을 표시하려고했습니다. 아무도 이것으로 나를 도울 수 있습니까?

#navigation { 
position: relative; 
} 
#main-nav { 
clear: left; 
float: left; 
list-style: none; 
margin: 0; 
padding: 0; 
position: relative; 
left: 50%; 
text-align: center; 
} 
.nav li { 
display: block; 
float: left; 
list-style: none; 
margin: 0; 
padding: 0; 
position: relative; 
right: 24%; 
} 
.nav li:hover, .nav li.hover { 
position: relative; 
} 
.nav li ul li { 
left: 0; 
} 

내가 .nav 리튬 부분 탐색 모음의 위치를 ​​제어하는 ​​것을 특히주의 :

이

내가 내 CSS 편집기에서 추가 된 코드의 비트가 탐색 모음을 중심으로하는 것입니다.

는

탐색 모음에 대한 나의 HTML 코드는 다음과 같습니다 :

<div class="col-sm-6 col-md-3 footer-sidebar-wrap"> 
          <aside id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">Menu</h3><div class="menu-primary-menu-container"><ul id="menu-primary-menu-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-260"><a href="home.html">Home</a></li> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116"><a href="shop.html">Shop</a></li> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-117"><a href="about.html">About</a></li> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="contact.html">Contact</a></li> 
<li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-114"><a href="news.html">News</a></li> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="account.html">Account</a></li> 
</ul></div></aside>      </div> 

탐색 모음의 전체 CSS 코드는 여기에 있습니다 : 당신의 <li> 요소의 폭을 초과하기 때문에이 발생

.page .navbar-custom { 
    background-color: rgba(10, 10, 10, .9) !important; 

} 
.navbar-custom { 
    background-color: rgba(10, 10, 10, .9); 
    border: 0; 
    border-radius: 0; 
    z-index: 1000; 
    font-family: "Roboto Condensed", sans-serif; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    font-size: 11px; 
    -webkit-transition: background, padding 0.4s ease-in-out 0s; 
    -moz-transition: background, padding 0.4s ease-in-out 0s; 
    -ms-transition: background, padding 0.4s ease-in-out 0s; 
    -o-transition: background, padding 0.4s ease-in-out 0s; 
    transition: background, padding 0.4s ease-in-out 0s; 

} 

.navbar a { 
    -webkit-transition: color 0.125s ease-in-out 0s; 
    -moz-transition: color 0.125s ease-in-out 0s; 
    -ms-transition: color 0.125s ease-in-out 0s; 
    -o-transition: color 0.125s ease-in-out 0s; 
    transition: color 0.125s ease-in-out 0s; 
} 

.navbar-custom .sub-menu, 
.navbar-custom .children { 
    background: rgba(26, 26, 26, .9); 
    border-radius: 0; 
    border: 0; 
    padding: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 

.navbar-custom .navbar-brand { 
    letter-spacing: 4px; 
    font-weight: 400; 
    font-size: 22px; 
    color: #fff; 
} 

.navbar-custom .sub-menu li, 
.navbar-custom .children li { 
    list-style:none; 
} 

.navbar-custom .sub-menu li a, 
.navbar-custom .children li a { 
    width:100%; 
    display:block; 
} 

.navbar-custom .nav li > a { 
    position: relative; 
    color: rgba(255, 255, 255, .7); 
} 

.navbar-custom .sub-menu > li > a, 
.navbar-custom .children > li > a { 
    border-bottom: 1px solid rgba(73, 71, 71, 0.15) !important; 
    padding: 11px 15px; 
    letter-spacing: 2px; 
    color: #999; 
} 

.navbar-custom .sub-menu .sub-menu, 
.navbar-custom .children .children { 
    border-left: 1px solid rgba(73, 71, 71, 0.15); 
    left: 100%; 
    right: auto; 
    top: 0; 
    margin-top: 0; 
} 

.navbar-custom .sub-menu.left-side .sub-menu, 
.navbar-custom .children.left-side .children { 
    border: 0; 
    border-right: 1px solid rgba(73, 71, 71, 0.15); 
    right: 100%; 
    left: auto; 
} 

.navbar-custom .nav > li > a:focus, 
.navbar-custom .nav > li > a:hover, 
.navbar-custom .nav .open > a, 
.navbar-custom .nav .open > a:focus, 
.navbar-custom .nav .open > a:hover, 
.navbar-custom .sub-menu > li > a:focus, 
.navbar-custom .sub-menu > li > a:hover { 
    background: none; 
    color: #fff; 
} 

.navbar-custom .sub-menu > li > a:hover, 
.navbar-custom .children > li > a:hover { 
    background: rgba(255, 255, 255, .1) !important; 
} 

.navbar-custom .menu-item-has-children-toggle:after { 
    position: absolute; 
    display: block; 
    right: 0; 
    top: 50%; 
    margin-top: -6px; 
    font: normal normal normal 14px/1 'ElegantIcons'; 
    font-size: 9px; 
    content: "\43"; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.navbar-custom .navbar-toggle .icon-bar { 
    background: #fff; 
} 

.navbar-nav .menu-item-has-children>a:after, 
.navbar-nav .page_item_has_children>a:after { 
    position: absolute; 
    display: block; 
    right: 0; 
    top: 50%; 
    margin-top: -6px; 
    font: normal normal normal 14px/1 ElegantIcons; 
    font-size: 9px; 
    content: "\43"; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.navbar-nav .sub-menu, 
.navbar-nav .children { 
    min-width: 180px; 
    font-size: 11px; 
} 

.navbar-right ul { 
    text-align: left; 
} 

/* Navbar search */ 

.menu-item-has-children-search { 
    position: relative; 
    padding: 5px; 
} 

.menu-item-has-children-search .form-control { 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 11px; 
} 

.search-btn { 
    position: absolute; 
    background: transparent; 
    border: none; 
    overflow: hidden; 
    top: 50%; 
    right: 1px; 
    width: 42px; 
    height: 40px; 
    line-height: 38px; 
    font-size: 14px; 
    outline: none; 
    color: #999; 
    margin-top: -20px; 
} 

Answer 1

부모 <ul> 요소

나는 중심으로되지 않습니다, 당신은 그러나, 랩 동작을 중지합니다

li { white-space: nowrap; }

이 사용할 수 상상한다.

나는 미디어 쿼리를 통해이 문제를 해결하거나 부모를 <ul> 요소가 일반적으로 더 넓게 만들 것입니다.

는 미디어 쿼리는 다음과 같은 템플릿을 사용하여 사용하려면

@media (max-width: 1000px) { //place the CSS you want to be activated when the screen is smaller than 1000px here ul{ width: 1000px; } li{ font-size: 10px; } }

발생할 수있는 또 다른 것은 <li> 또는 <h3> 요소 사이의 공백입니다. 이것이 문제가되는 이유는 여섯 개의 <li> 또는 <h3> 태그의 너비가 모두 100 % 인 경우 여분의 공백이 100 % 너비 이상으로 이동하여 마지막 요소가 다음 줄에 오게됩니다. 아래 코드는 트릭을 수행 할 수 있습니다.

h3 { 
padding:0; 
margin:0; 

}