I changed the breakpoint for the bootstrap navbar using this code:
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
overflow-y: auto;
}
.collapsing {
overflow: hidden!important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
My problem is that between 768px and the new breakpoint, the menu goes out of the nav container, and i want it to behave like in mobile (stay inside container and add a vertical scroll bar). I may be mising some css but no idea what :(
EDIT: Here you have the jsfiddle https://jsfiddle.net/nato522/e71e8bfd/
EDIT2: also, a picture to show the problem
navbar issue
Try This CSS:
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
overflow-y: auto!important;
overflow-x: hidden!important;
}
.collapsing {
overflow: hidden!important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}}
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 months ago.
Hi I am trying to have a nav bar in the middle on the top of the page. I have tried text alignment, align items as center, but I had no luck so far,
Does anyone know how to align this nav menu in the middle of the page?
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
height: 40px;
width: 20%;
background: #da6548;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
text-align: center;
border-bottom: 2px solid #da6548;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 5 px;
height: 40px;
align-items: center;
}
nav li {
/* display: inline; */
margin: 0 auto;
align-items: center;
display: inline-block
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('http://media02.hongkiat.com/responsive-web-nav/demo/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* nav bar until here */
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Blog</li>
</ul>
</nav>
Add margin: auto; to your nav element:
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
body {
background-color: #ece8e5;
}
nav {
margin: auto;
height: 40px;
width: 20%;
background: #da6548;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
text-align: center;
border-bottom: 2px solid #da6548;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 5 px;
height: 40px;
align-items: center;
}
nav li {
/* display: inline; */
margin: 0 auto;
align-items: center;
display: inline-block
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width: 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url('http://media02.hongkiat.com/responsive-web-nav/demo/nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width: 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* nav bar until here */
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Blog</li>
</ul>
</nav>
I suggest you to get rid of "float" and use flex instead, it's much simple and powerful and easy to deal with.
CSS
nav {
display: flex;
align-items: center;
height: 75px;
background: #3c7eca;
gap: 5px;
padding: 5px;
}
nav a {
color: white;
padding: 10px 40px;
background: #d86649;
text-decoration: none;
}
HTML
<nav>
Home
Blog
</nav>
I set the height of the navbar to 80px. But when I shrink my window, the background of the nav links isn't visible. I think I forgot to set a margin any where, but I can't imagine where. Can someone help?
navbar.navbar-custom {
background-color: #b80000;
border-radius: 0;
border: 0;
height: 80px;
margin-bottom: 0;
z-index: 1001;
}
.navbar-custom .nav li a {
padding: 15px 10px;
}
.navbar-custom .nav li a:hover {
background-color: #b80000;
}
.navbar-custom .navbar-header .navbar-brand {
padding: 5px 15px;
}
.navbar-custom .navbar-header .navbar-brand img {
height: 70px;
width: auto;
}
.navbar-custom .navbar-header .navbar-toggle {
border: 1px solid #fff;
margin-top: 25px;
}
.navbar-custom .navbar-header .navbar-toggle .icon-bar {
border: 1px solid #fff;
}
Here is my link to Bootply
Remove /* height: 80px; */ from .navbar.navbar-custom
Possibly replace it with min-height:80px;
Helo guys, I want to modify the navbar in order to collapse on #screen-md :992px;.
I have modified navbar.less, but still not working and I don't know what to do.
So how can I modify the #grid-float-breakpoint variable in order to have that menu collapsed on custom media query size?
FIDDLE:
You can change the collapse point in 3.1 like this..
#media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
http://www.bootply.com/120951
In Bootstrap 4, changing the breakpoint is easier. See this answer
In variables.less change
#grid-float-breakpoint: #screen-sm-min
to
#grid-float-breakpoint: #screen-md-min;
or to whatever other width you would like.
It's easy and painless done this way.
Here is the code I used to solve this, just add it to your style sheet.
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
If you are using Twitter Bootstrap, the responsive collapse is already built in. You may just have to invoke it with a class in your menu. But this is the css I use in most of the Bootstrap applications I've worked with, including the one I working in right now
#media(min-width:768px) {
.navbar-collapse {
width: auto;
/* more code here */
}
change the min width to the width you want it to collapse from.
I am having some problems with the alignment of the links inside the navbar for the mobile version of my site. When looking at the desktop version, everything is ok. It looks like this:
Code:
.navbar {
margin-top: 30px;
min-height: 50px;
padding: 0;
background-color: red;
background-image: none;
filter: -;
border: none;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
*zoom: 1;
}
.navbar-inner {
background-color: fuchsia;
background-image: none;
border: none;
border-radius: 0;
box-shadow: none;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin-left: 20px;
background-color: #5593f8;
webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Now for the mobile version. It looks like this at the moment:
Code:
#media (max-width: 767px) {
body {
padding-right: 0;
padding-left: 0;
}
.navbar {
margin-top: 0px;
}
.navbar .nav > li {
float: none;
text-align: center;
}
.navbar li a,
.navbar .nav > li > a:hover {
margin: 0;
}
.navbar .nav {
width: 100%;
background: red;
}
.navbar-inner {
padding: 0;
margin: 0;
}
}
Do you see that small gap on the left where the fuchsia can be seen? I don't want that. I want the links to be width: 100%, but somehow that's not possible. I spend nearly the whole day to figure out what the problem is, but I can't wrap my head around it. Its not margin, its not padding, but what is it? Please help me.
Ok, I got it!
After the media query posted above, I had this:
#media (max-width: 979px) {
.navbar {
margin-top: 0px;
}
.navbar-inner {
padding-left: 5px;
}
}
The 5px declared in the last rule are gap you see in the post above. Moving the rule from this post above the rule from the first post did solve the problem.
I'm trying to make my sidebar fluid so it adjusts with the browser window, and everything seems to be working great, except for the fact that with the media query added, my CSS styling breaks, but when I take the query away it is back to the norming styling from my stylesheet. Can someone look at my code and tell me what I'm doing wrong? Thanks in advance!
BTW, when I add the second ending curly brace to the #rightandoverview media query, the styling go back to the way it should, but the fluidity doesn't work. What could it be?
#righthandoverview {
position: absolute;
top: 91px;
right: 0px;
width: 20%;
height:215px;
background-color: white;
webkit-box-shadow: 0px 4px 5px -5px #777;
-moz-box-shadow: 0px 4px 5px -5px #777;
box-shadow: 0px 4px 5px -5px #777;
}
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview ul {
float:left;
width:30%;
background-color: yellow;
margin-top: 10px;
}
}
#righthandoverview ul li > a {
display: inline;
text-decoration: none;
color:#8BAFDA;
}
#righthandoverview ul li {
padding-bottom: 6px;
}
Looks like you are missing a bracket to end your first media query
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
#righthandoverview ul {
position: absolute;
display: inline;
float: left;
font-family: klavika-light;
list-style-type: none;
text-decoration: none;
white-space: nowrap;
}
}
you missed a bracket in the following code, i have added it.
#media screen and (max-width:830px) and (min-width:100px) {
#righthandoverview {
float: left;
width: 30%;
background-color: yellow;
margin-top: 5px;
}
}