How to customize collapsed menu in Bootstrap
So, I have a navbar that I am doing with Bootstrap. I've used a border below the hover menu items, so you get the effect of a row appearing below the menu item when you hover over it. But I have a couple of problems with the collapsed version of my menu.
1) The border won't disappear in my vertical collapsible menu. It looks ridiculous.
2) The li elements look crappy on the tablet. They appear in line still and they collide with the logo in the left corner of the page (this is an image not visible in my oblique link).
Basically I want to know how to set up JUST a collapsed menu or a vertical menu, but I can't find much on this topic. Here is the code so you can see what I am talking about.
source to share
Problems arise from the fact that you launch the toggle menu to 991px
and below using css
where the bootstrap launch buttons in 767px
and below start by default .
To fix this, we need to set custom styles to work also during 991px
and below.
1) The border won't disappear in my vertical collapsible menu. It looks ridiculous.
@media (max-width: 991px) {
.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li > a:focus::after {
display: none;
}
}
2) The li elements look crappy on the tablet. They appear in line still and they collide with the logo in the left corner of the page (this is an image not visible in my oblique link).
@media (max-width: 991px) {
.navbar-nav {
margin: 7.5px -15px;
width: 100%;
float: none !important;
}
.nav>li {
position: relative;
display: block;
float: none;
}
}
Combining into a media query max 991px
@media (max-width: 991px) {
.navbar-nav {
margin: 7.5px -15px;
width: 100%;
float: none !important;
}
.nav>li {
position: relative;
display: block;
float: none;
}
.navbar-default .navbar-nav > li > a:hover::after,
.navbar-default .navbar-nav > li > a:focus::after {
display: none;
}
}
source to share