Change 3-bar menu to Inline on responsive viewports

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 */

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

StrixCZ
23 November 2016, 20 h 01 min

Thank you for this! 🙂 Now, what changes do I have to make to the code above, if I want the menu to:
1) Be aligned to the center, instead of the left side.
2) Never wrap to more than one line (and scale the font down instead, if necessary).
?
Natália Rodrigues Pereira
3 June 2016, 3 h 24 min

Didn’t work. It has a syntax error.
- Menaka S
  3 June 2016, 4 h 56 min
  
  Are you getting a syntax error if you add the above code?
Leo
21 May 2016, 17 h 20 min

can you guys help me out the menu , aligment , I want the menu to be in a single line , and more center :

website below.

http://www.comicbookpressingservice.com/

thanks in advanced.
Menaka S
8 February 2016, 10 h 15 min

Hi Alex, Do create a horizontal menu only. In smaller viewports, it will be automatically shown as a 3-bar vertical menu.
Alex Goforth
31 January 2016, 15 h 29 min

Thanks for this. This is exactly what I want to do, but despite inputting the code into a childified style.css file, where I’ve added other alterations to the page, this doesn’t seem to work for me.
Any advice would be much appreciated.
- Menaka S
  1 February 2016, 6 h 40 min
  
  Do give more information about what alterations you have done. To start with, do give a link to your site.
  - Alex Goforth
    6 February 2016, 18 h 15 min
    
    Thanks for replying.
    
    My website is http://www.estelawelldon.net.
    
    And I’ve simply added a table to the style.css to allow me to add text in 2 columns between the slider and the featured pages.
    - Menaka S
      8 February 2016, 6 h 11 min
      
      Hi Alex,
      I saw your site. The table is fine. You have two menus. One is vertical and the other regular. What do you want to achieve with these menus? Do you want the Vertical menu to be displayed like the regular menu? Then, what happens to the regular menu?
      - Alex Goforth
        8 February 2016, 8 h 41 min
        
        Thanks Menaka. I want the horziontal menu as standard and the vertical menu only on smaller viewports, i.e. smartphone, but can’t find a way to remove the verical menu.
  - Alex Goforth
    7 February 2016, 16 h 30 min
    
    Thanks for replying.
    The site is http://www.estelawelldon.net/, and I add a table to the front page between the slider and the highlighted pages.
    I could really use some advice about this.
Igor Zhykov
20 September 2015, 15 h 31 min

Thank you! Look at my site – http://pycc-site.ru/
Gaby Isabelle
30 August 2015, 21 h 24 min

Thank you for this.

I played around on some devices (tablet, computer, phone), and my only problem is on the phone.
The menu behaves fine, wrapping up and everything, but it overlays the rest of the page. What I want it to do is just push Not being very good in CSS, I was wondering if you could help me with that?

Thank you!

Gaby Isabelle

Comments are closed.

Change 3-bar menu to Inline on responsive viewports

AUTHOR

Dave Bardell

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