Customizr Main Navigation No Wrap
-
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; }
The topic ‘Customizr Main Navigation No Wrap’ is closed to new replies.