Change 3-bar menu to Inline on responsive viewports

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

There is a lot of debate on the value of the 3-bar Hamburger Menu on the web. A fairly common request is to remove it from the Customizr navigation, so this Snippet was written to achieve that.
The snippet removes the 3-bar menu, but does not attempt to change the styling of the menu items as the viewport reduces. This will require further work by you to decide what you wish to do (eg reduce font-size, inline spacing etc).

Where to copy/paste this code?

NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.

The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Change 3-bar menu to Inline on responsive viewports */
/* ----------------------------------------------*/
/* Navigation without 3-bar
/* ----------------------------------------------*/
@media (max-width: 979px) {
  .tc-header .nav-collapse {
    width: inherit;
    overflow: visible;
    height: inherit;
    position: relative;
    top: inherit;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: inherit;
  }

  .tc-header .navbar .nav-collapse ul.nav > li li a {
    padding: 3px 20px;
  }

  .tc-header .nav-collapse.collapse .nav {
    display: block;
    float: left;
    margin: inherit;
  }

  .tc-header .nav-collapse .nav > li {
    float: left;
  }

  .tc-header .nav-collapse .dropdown-menu {
    position: absolute;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
  }

  .tc-header .navbar .nav > li > .dropdown-menu:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    top: -7px;
    left: 9px;
  }

  .tc-header .navbar .nav > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu:before {
    content: '';
    display: inline-block;
    position: absolute;
  }

  .tc-header .tc-hover-menu.nav .caret {
    display: inline-block;
  }

  .tc-header .tc-hover-menu.nav li:hover > ul {
    display: block;
  }

  .tc-header .nav a, .tc-header .tc-hover-menu.nav a {
    border-bottom: none;
  }

  .tc-header .dropdown-menu > li > a {
    padding: 3px 20px;
  }

  .tc-header .tc-submenu-move .dropdown-menu > li > a:focus, .tc-header .tc-submenu-move .dropdown-menu > li > a:hover, .tc-header .tc-submenu-move .dropdown-submenu:focus > a, .tc-header .tc-submenu-move .dropdown-submenu:hover > a {
    padding-left: 1.63em;
  }

  .tc-header .tc-submenu-fade .nav > li > ul {
    opacity: 0;
    top: 75%;
    visibility: hidden;
    display: block;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }

  .tc-header .tc-submenu-fade .nav li.open > ul, .tc-header .tc-submenu-fade .tc-hover-menu.nav li:hover > ul {
    opacity: 1;
    top: 95%;
    visibility: visible;
  }

  .tc-header .tc-submenu-move .dropdown-menu > li > a {
    -webkit-transition: all ease .241s;
    -moz-transition: all ease .241s;
    -o-transition: all ease .241s;
    transition: all ease .241s;
  }

  .tc-header .dropdown-submenu > .dropdown-menu {
    top: 110%;
    left: 30%;
    left: 30%\9;
    top: 0\9;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }

  .navbar .btn-toggle-nav .btn {
    display: none;
  }
}
.sticky-enabled .tc-header .nav-collapse.collapse {
  clear: none;
}

/* END OF Change 3-bar menu to Inline on responsive viewports */

Leave a Reply to Gaby Isabelle Cancel reply

Your email address will not be published. Required fields are marked *

13 thoughts on “Change 3-bar menu to Inline on responsive viewports”