The top menu and logo image on this site (URL: CRMI Website) is not working correctly and I am not sure how to fix it. I have tried a few things but they still don’t keep the menu from moving down when viewport<1200px and disappearing to show the responsive menu when the viewport<980px.
I’d like the menu and logo to stay visible until the viewport <480px;
Where can I learn more about modifying the bootstrap-responsive stylesheet to fit my needs?
Hi,
Your nav is floated and therefore will always try to be as wide as it can be to hold all of its content. This means that as soon as you close the window the nav will drop to a new line because it cannot fit as a whole.
If you don’t float the nav (you can still float the list items) then as you close the window the nav will wrap to a new line. Of course this will overflow because you have set heights on the nav an dinner so they will need to be removed.
e.g.
.navbar,.navbar-inner{height:auto}
.navbar .nav{float:none;}
.navbar .nav > li > a{padding-top:0}
That will allow the nav to wrap and for the page to get smaller.
As a rule of thumb you should never touch the bootstrap css files at all and instead do all your work in a custom css file that over-rides the bootstrap defaults where necessary. This will save you breaking some important functionality in the bootstrap files and never being able to fix it without starting from scratch. If you keep all your changes in a custom css file then you know where they are and what you have done and indeed if you needed to update bootstrap you would have your custom styles still available (theoretically).
However, as you have already started on this approach you will need to adjust the media query in the responsive css file as follows to allow the menu to be visible a little longer. This cod is from the end of the file.
@media (max-width: 768px) {
body {
padding-top: 146px;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
}
.navbar-fixed-top {
/* margin-bottom: 18px;*/
}
.navbar-fixed-bottom {
margin-top: 18px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
/* padding: 5px; */
padding-left: 20px;
padding-right: 20px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
background: url("../images/logo_sm.png") no-repeat scroll 0 0 transparent;
height: 34px;
margin: 0 0 0 -5px;
padding-left: 10px;
padding-right: 10px;
width: 83px;
}
.navbar {
height: 46px;
}
.navbar-inner {
height: 43px;
}
body {
padding-top: 86px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 9px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #999999;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
color: #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #222222;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: block;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 9px 15px;
margin: 9px 0;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
background: url(../images/stripe.png);
width: 200px;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-right: 10px;
padding-left: 10px;
}
}
@media (min-width: 768px) { /*980*/
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
@media (min-width: 768px) {
.navbar .brand {
display: block;
background:red url(../images/logo_med.png) no-repeat;
width: 124px;
height: 52px;
text-indent: -9999px;
float: left;
padding: 18px 20px 12px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #333333;
}
}
The above has been reduced to a media query at 768px which allows the page to get a little smaller. I wouldn’t recommend trying to get down to 480px as that would mean the nav would have wrapped many times.
The click nav now works properly when clicked as your example is not. However you stil need to style it to make properly so that it looks nice and has better visibility.
Bear in mind that when you use a framework like bootstrap its wise to go with its defaults because that’s why you used the framework in the first place. If you are going to over-ride everything then its easier to code it yourself from scratch 