响应式菜单内联wordpress

问题描述 投票：0回答：1

目前正致力于重新设计主题：Educampus

我遇到一个问题，响应式菜单在特定大小上变为两行：

col-lg or col-md:

enter image description here

col-sm

enter image description here

col-xs

enter image description here

为此，我有以下代码（由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;
}

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

enter image description here

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;
}
html css wordpress
1个回答
1
投票

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

你有几个选择：

  • 增加移动视图（使用汉堡菜单）触发的大小。
  • 减小较小尺寸的边距和字体大小。
  • 隐藏菜单项。

所有这些选项都可以通过css Media queries实现。 ZimSystems answer描述了如何做选项1。

使用媒体查询减少字体大小/边距时也是如此： （在全屏触发不同的css规则集后调整浏览器大小，qazxsw poi）

@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;
  }
}
If it still doesn't fit, you can hide (redundant) menu items.
IE <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>

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.