Keep Menu on One Line

How did you get your “three bar menu” to look like that? Sorry I have no idea how to help – your website is gorgeous though!

Thanks @thepetsnobs!

I used this snippet to alter the three bar menu:

https://www.themesandco.com/snippet/add-menu-text-3-bar-menu-button/

Did you see this Snippet?

@rdell

I did see that snippet, and know that the solution will involved that, but the problem is I don’t understand what in the CSS is even allowing the menu to go to two lines before going to the 3 line menu. I can’t make sense of the nav-collapse CSS, in short.

Basically I want the menu to remain one line above 980 pixels, and go to the 3 menu bar below that — and not do anything in between.

So I think I would use:

/* ============================================== */
@media all and (min-width: 980px)

Something to force the menu to stay on one line

and

@media all and (max-width: 979px) {

whatever calls the 3 bar menu

Correct? And what would the CSS be for those to “commands”?

You have code in your style:

.navbar .nav {
  float: none;
  text-align: center;
  width: 100%;
}

If you play with the width: 100% you’ll see how that affects what you are doing.

Try using the Viewport Resizer tool which you can enter Custom settings and you’ll be able to see what happens around width 980px

Someone just added this and it worked awesome for me. I couldn’t get the previous suggestions to work.

.navbar .nav li { white-space: nowrap; }

I saw that too. Will make a Snippet.

This code is not working for me, I tried it in the custom css section and in my child theme style.css, any help would be much appreciated.

I just set up the child theme with the customizr child theme plugin, and I have a few basic customizations so far:

/*
Theme Name: Customizr Child
Theme URI: https://themesandco.com/customizr
Description: A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr’s core code. In order to keep your code as clean and flexible as possible, try to use Customizr’s hooks API for your customizations. Do something awesome and have fun !
Author: Nicolas Guillaume (nikeo)
Author URI: https://themesandco.com
Template: customizr
Version: 1.0.0
*/

/* Your awesome customizations start right here !
————————————————————– */

/*Menu */
/********/

/* Adjust Menu colors – Normal */
.navbar .nav > li > a, .navbar .nav > li > a:first-letter {
color: lightgray;
text-shadow: none;
}

/* menu color hover background */
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: #0014FF;
color: #0088cc;
text-decoration: none;
}

/*navbar background color and shadow*/
.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background:none
}

/*header */
/********/

/*header background color*/
header.tc-header {
min-height: 45px;
background: #007db7;
border-bottom: 10px solid #007db7;
border-top: 5px solid #007db7;
}