Responsive menu inline with wordpress

Question

Currently working on a redesign of a theme based from: Educampus

I'm having a problem where the responsive menu goes to two lines on a certain size:

col-lg or col-md:

col-sm

col-xs

For this I have the following code (after generated by wordpress through 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;
}

I also tried the following solution but the text gets cut:

https://jsfiddle.net/f4bpyav4/

Modified 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;
}

Lars · Answer 1 · 2017-12-28T09:19:43.607

Looks like the theme is using bootstrap css framework as its foundation.

You've got a couple of options:

Increase the size at which the mobile view (with the hamburger menu) triggers.
Decrease the margins & font sizes on the smaller sizes.
Hide menu items.

All of these options can be achieved with css Media queries.
ZimSystems answer describes how to do option 1.

The same hold true when using media queries to decrease the fontsize/margins:
(resize the browser after going fullscreen to trigger different css rule sets, @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>

If it still doesn't fit, you can hide (redundant) menu items.
IE .navbar .navbar-nav li:nth-child(2){display:none;}

There is only so much space you can use. If you can't fit an elephant into a closet. you ether get a bigger closet or a smaller elephant.

Like I said I want it on one inline block not triggering the hamburger menu until the col-xs. However I have tried reducing margin and font but I still get some overflowing text on those smaller sizes — Mederic, Dec 28 '17 at 08:48
If you have already reduced font-size and margin, iI think you have no more options than Lars answers. — Sébastien Gicquel, Dec 28 '17 at 08:52

Responsive menu inline with wordpress

1 Answers1