• I know this has been discussed before, but none of the solutions have worked for me, so I thought I’d see if anyone can help. I am having an issue with my navigation wrapping to the next line when it gets to a certain point before going into the responsive button mode. As you can see in the linked images below, I don’t want this to happen. (Unfortunately I am building the site remotely and can’t post a link to it.)

    Image of page when in full screen mode.

    Image of page when menu has wrapped.

    As you can see, I have adjusted the theme to have a main site logo at the top with a nav bar to the right of it, and an image slider (that I added as an extra widget) under both of them.

    I’ve tried the following solutions with no success:

    {white-space: nowrap}

    .tc-header .navbar-wrapper[class*=span] {
    width: 100%;
    }

    @media (max-width: 979px) and (min-width: 768px){
    .navbar-wrapper.container{
    width: 724px;
    }
    }

    And maybe a few more ideas that I can recall right now.

    Also, below is my child theme css code for the header and slider area. (It may be a little sloppy right now as my client keeps making a TON of changes.)

    @import url("../customizr/style.css");
    @import url(http://fonts.googleapis.com/css?family=Muli:300|Oswald:400);
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    /* Fonts */
    
    p {
    font-family: 'Muli', sans-serif;
    font-weight: 300;
    font-size: 14pt;
    line-height: 26px;
    }
    
    /* Slider */
    
    .my-extra-widget {
    	float:left;
    	width:100%;
    	margin-top: -33px;
    	margin-bottom: 30px;
    	border: 35px;
    	border-top-style: solid;
    	border-top-color: #222;
    }
    /*
    .my-extra-widget {
    	float:left;
    	width:100%;
    	margin-top: -33px;
    	margin-bottom: 30px;
    	border: 45px;
    	border-top-style: solid;
    	border-top-color: black;
    }
    */
    
    /* Header and Navigation */
    
    /* Header Logo */
    .row-fluid [class*=span]:first-child {
    margin-top: -13px;
    margin-right: -15px;
    }
    
    body > header > div.brand.span3.pull-left {
    	margin-left: 0px;
    }
    
    /* Header Color/Gradient */
    .tc-no-sticky-header .tc-header {
    height: 50px;
    background: #000000; /* Old browsers */
    background: -moz-linear-gradient(top,  #000000 0%, #232323 10%, #353535 18%, #232323 31%, #4c4c4c 50%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(10%,#232323), color-stop(18%,#353535), color-stop(31%,#232323), color-stop(50%,#4c4c4c), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #000000 0%,#232323 10%,#353535 18%,#232323 31%,#4c4c4c 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #000000 0%,#232323 10%,#353535 18%,#232323 31%,#4c4c4c 50%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #000000 0%,#232323 10%,#353535 18%,#232323 31%,#4c4c4c 50%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #000000 0%,#232323 10%,#353535 18%,#232323 31%,#4c4c4c 50%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    
    }
    
    .tc-header {
    border-bottom: 4px solid #eb0303;
    }
    
    /* Carets Color */
    .navbar .nav li.dropdown .caret, .navbar .nav li.current-menu-ancestor>a .caret, .navbar .nav li.dropdown.current-menu-ancestor>a .caret, .navbar .nav li.dropdown.current-menu-item>a .caret, .navbar .nav li.dropdown.open.current-menu-ancestor>.dropdown-toggle .caret, .navbar .nav li.dropdown.open>.dropdown-toggle .caret, .navbar .nav>li.current-menu-item>a .caret {
    border-top-color: #FFF;
    border-bottom-color: #FFF;
    margin-top: 12px;
    }
    
    /* Nav Font/Font Color */
    .navbar .nav>li.current-menu-ancestor>a, .navbar .nav>li.current-menu-item>a {
    color: #FFF;
    }
    
    .navbar .nav>li>a {
    float: none;
    color: #FFF;
    font-size: 1.1em;
    text-decoration: none;
    text-shadow: none;
    letter-spacing: 1px;
    }
    
    body, .navbar .nav>li>a {
    font-family: 'Oswald', sans-serif;
    line-height:26px;
    }
    
    /* Spacing Menu Items */
    .navbar .navbar-inner .nav li {
    margin-right: -10px;
    }
    
    /* Nav Hover */
    .navbar .nav>li>a:hover {
    color: #ed1c24;
    font-weight:bold;
    text-shadow:
       -1px -1px 2px #383838,
        1px -1px 2px #383838,
        -1px 1px 2px #383838,
         1px 1px 2px #383838;
    }
    
    .tc-submenu-fade .nav>li>ul>li>a:hover {
    color: #ed1c24;
    font-weight:bold;
    text-shadow:
       -1px -1px 2px #383838,
        1px -1px 2px #383838,
        -1px 1px 2px #383838,
         1px 1px 2px #383838;
    }
    
    .tc-submenu-move .dropdown-menu>li>a:hover {
    color: #ed1c24;
    font-weight:bold;
    text-shadow:
       -1px -1px 2px #383838,
        1px -1px 2px #383838,
        -1px 1px 2px #383838,
         1px 1px 2px #383838;
    }
    
    .tc-fade-hover-links a:not([class*=round-div]) {
    	color:#FFF;
    }
    
    /* Dropdown Background */
    .navbar-inner .nav-collapse .nav li.open>ul {
    background-color: grey;
    }
    
    .dropdown-menu {
    background-color: grey;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    }
    
    /* Dropdown Nav */
    .navbar .nav-collapse ul.nav>li li a {
    padding-top: 10px;
    height: 25px;
    }
    
    .tc-submenu-fade .nav>li>ul {
    font-size: 1.1em;
    }
    
    /* Responsive Collapsed Menu */
    .nav-collapse .nav {
    margin: 0 0 20px 10px;
    }
    
    .nav-collapse, .nav-collapse.collapse {
    background-color: #3d3d3d;
    }
    
    button.btn.btn-navbar {
    margin-top: -74px;
    }
    
    .navbar-wrapper.clearfix.span9 {
    margin: 5px 0 0 0;
    }
    
    /* Client Login Button */
    
    .navbar .nav li.client_login {
    	float: right;
    }
    
    .nav-collapse .nav {
    width: 95%;
    }
    
    /* Sub Sub Menu */
    
    .dropdown-submenu>.dropdown-menu {
    left: 80%;
    margin-top: -5px;
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter dsb0328

    (@dsb0328)

    Guess I should have also mentioned that I would like the menu to either slightly shrink a little until it goes into button mode or just go straight into button mode.

    Thanks in advance for any help.

    Thread Starter dsb0328

    (@dsb0328)

    Also notice that it pushes the slider down, which has a dark grey top border on it, into an area that is white when the font color is white as well. Then you can’t even see the menu item.

    Anyone out there with help?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Customizr Main Navigation No Wrap’ is closed to new replies.