Question

目前正致力于根据以下内容重新设计主题：Educampus

我遇到一个问题，即响应式菜单会转到一定大小的两行：

col-lg or col-md:

col-sm

col-xs

为此，我有以下代码（由wordpress通过wp_nav_menu生成）：

https://jsfiddle.net/3Lfhs1jb/1/

HTML：

<div class="header_content">
   <div class="row">
      <div class="col-md-3 col-sm-3">
         <div class="row">
            <div class="logo">
               <a href="#"><img src="https://upload.wikimedia.org/wikipedia/en/b/bd/Random_App_Logo.png" alt=""></a>
               <div class="navbar-header rowl">
                  <button type="button" class="navbar-toggle" 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>
            </div>
         </div>
      </div>
      <div class="col-md-9 col-sm-9 nav_area">
         <nav class="main_menu navbar-collapse collapse">
            <ul id="menu-main-menu" class="nav navbar-nav navbar-right">
               <li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-92 active"><a title="Welcome" href="http://imagerylab.pixiumdigital.com/">myLongerLongTitle</a></li>
               <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-107 dropdown">
                  <a title="Researches" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">myLongTitle <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                     <li id="menu-item-129" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-129"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-130" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-130"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-131" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-131"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-132" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-132"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-133" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-133"><a title="myTitle" href="#">myTitle</a></li>
                  </ul>
               </li>
               <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-114 dropdown">
                  <a title="Publications" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">myLongerLongTitle <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                     <li id="menu-item-187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-187"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-188" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-188"><a title="myTitle" href="#">myTitle</a></li>
                     <li id="menu-item-189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-189"><a title="myTitle" href="#">myTitle</a></li>
                  </ul>
               </li>
               <li id="menu-item-257" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-257"><a title="myTitle" href="#">myTitle</a></li>
               <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a title="myTitle" href="#">myTitle</a></li>
            </ul>
         </nav>
         <form action="#" class="header_search hidden-xs">
            <input placeholder="Search" value="" name="s" id="s" type="text">
            <input value="Search" type="submit">
         </form>
      </div>
   </div>
</div>

CSS：

.header_content {
    background: #fff;
    border-bottom: 3px solid #e4e4e4;
    font-family: 'Libre Baskerville', serif;
    position: relative;
    z-index: 9;
    margin-top: 5%;
}
.logo{
  padding-left: 30px;
}
.logo a img {
    min-width: 200px !important;
    padding: 0;
    max-width: 100%;
}
.nav_area {
    padding-right: 88px;
}
li{
  background-color:#c0c0c0;
  border: solid thin white;
}

我也尝试了以下解决方案，但文字被删除了：

https://jsfiddle.net/f4bpyav4/

修改后的CSS：

.header_content {
    background: #fff;
    border-bottom: 3px solid #e4e4e4;
    font-family: 'Libre Baskerville', serif;
    position: relative;
    z-index: 9;
    margin-top: 5%;
}
.logo{
  padding-left: 30px;
}
.logo a img {
    min-width: 200px !important;
    padding: 0;
    max-width: 100%;
}
.nav_area {
    padding-right: 88px;
}
li{
  background-color:#c0c0c0;
  border: solid thin white;
}
#menu-main-menu{
     list-style: none;
     width: 100%;
     margin: 0;
     padding: 0;
     white-space: nowrap;
     overflow: visible !important;
}
#menu-main-menu > li{
    display: inline-block;
     width: 17%;
     height: 100%;
     padding: 0;
}
#menu-main-menu > li > a{
    font-size: 100% !important;
}

Answer 1

看起来主题是使用bootstrap css框架作为其基础。

你有几个选择：

增加移动视图（使用汉堡菜单）触发的大小。
降低利润率＆amp;较小尺寸的字体大小。
隐藏菜单项。

使用css Media queries可以实现所有这些选项 ZimSystems answer描述了如何执行选项1.

使用媒体查询减少字体大小/边距时也是如此：
（在全屏之后调整浏览器以调整不同的css规则集，@media only screen and (max-width: 600px) and (min-width: 420px)）

@media only screen and (max-width: 600px) and (min-width: 420px) { .navbar .navbar-nav li a { padding-left: 2px; padding-right: 2px; font-size: 10px; padding-top: 5px; padding-bottom: 5px; } .navbar .navbar-nav { margin-top: 0px; margin-bottom:0px; } .navbar .navbar-brand { height: 30px; padding-top: 5px; padding-bottom: 5px; } div.navbar { min-height: 30px; } } @media only screen and (min-width: 420px) { .collapse { display: block; } .navbar-header { float: left; } .navbar-toggle { display: none; } .navbar-nav { float: left; margin: 0; } .navbar-nav>li { float: left; } .navbar-nav>li>a { padding-top: 15px; padding-bottom: 15px; } } @media only screen and (max-width: 420px) { .collapse { display: none; } .navbar-header { display: block; } }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a> <a 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> </a> </div> <div class="navbar-collapse "> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">More</a></li> <li><a href="#">Options</a></li> </ul> </div> </div>

如果它仍然不适合，您可以隐藏（冗余）菜单项 IE .navbar .navbar-nav li:nth-child(2){display:none;}

你可以使用的空间太大了。如果你不能把大象放进壁橱里。你得到一个更大的壁橱或一个更小的大象。

响应式菜单内联wordpress

1 个答案: