Support » Theme: Customizr » Keep Menu on One Line

  • I thought I had solved this, but apparently not.

    I like how the menu looks on one line here:

    http://wabisabimoab.org

    However, in viewports between 980 & 1200 pixels wide, one menu item gets pushed down to a second line.

    Below 980, the three bar menu appears, which is great.

    I want to keep the menu on 1 line above 980 pixels and prevent it from going to 2 lines. How would I do that?

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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!

    Thread Starter matt84532

    (@matt84532)

    Thanks @thepetsnobs!

    I used this snippet to alter the three bar menu:

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

    Did you see this Snippet?

    Thread Starter matt84532

    (@matt84532)

    @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: http://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: http://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;
    }

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Keep Menu on One Line’ is closed to new replies.