A student asked me the question during the last lesson of my course. I found different cases on-line, and I made a mash up for an easy solution just with HTML and CSS.
First act on the HTML Navbar in this way:
...
...
...
Then overwrite Bootstrap classes in this way:
| Bootstrap Css | Changes |
|---|---|
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}
|
@media (min-width: 768px){
.navbar-header
{
float: none;
}
.navbar-toggle
{
display: block;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
|
I published a working sample on Github, the CSS classes are overwritten in the css/main.css file.
http://orazionelson.github.io/corso_bootstrap/navbar_mobile_always.html
No comments:
Post a Comment