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.
Related
https://codepen.io/jamesbcn/pen/weYdPw
I'm attempting to copy and paste a navigation bar, that I'm working on into CodePen but the CSS is not being displayed properly.
.navbar-brand {
padding: 0px;
height: 90px;
}
.navbar-brand>img {
height: 100%;
padding: 5px 15px 5px 5px;
width: auto;
margin: center;
}
.nav >li >a {
margin-top: 0;
}
.nav ul{
display: flex;
background-color: #C2A76F;
list-style-type: none;
padding: 0;
}
.nav ul a{
text-decoration: none;
text-align: center;
color: #FFF;
display: block;
padding: 5px;
border: 2px solid white;
}
.nav ul a:hover{
background-color: #816F4A;
}
.nav li{
flex: 1 1 0;
}
p{
padding-top: 10px;
font-size: 20px;
}
You have a couple of problems there, one being the structure in your HTML doesnt look like it matches what you're expecting in your CSS, and the other being that you're treating nav as a css class, rather than an element (Prefixing a css term with a period means the browser is trying to match an element with a css class like <div class='nav'></div>, rather than the HTML element <nav>).
E.g.
.nav >li >a {
margin-top: 0;
}
should be
nav >li >a {
margin-top: 0;
}
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;
}}
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've been working on the following website for my university: http://www.ecu.edu/english/tpc and have developed the layout that you currently see upon visiting it. It looks ok across browsers on the desktop, but I'm having trouble getting it to be flexible with smaller screens (such as an iPhone). I've attempted to adjust the max-width settings in a few places and I've had no luck. The specific issues are that the two horizontal menus at the top (in the HTML/CSS they are navigation and navigation2) and the content on the right (which are DTs contained in the sidebar div) seems to have fixed sizes which thus break the layout on smaller screens. Any suggestions are greatly appreciated, and the full CSS can be found here: http://jsfiddle.net/dSPdB/
/* -------- Horizontal Navigation -------- */
#navigation {
float: left;
margin: .5em 0 0 0;
position: relative;
padding: .5em 0;
text-transform: uppercase;
background-color: #592a8a;
}
#navigation ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#navigation li {
font-family: 'Noto Sans', sans-serif;
display: inline;
list-style: none;
display: block;
float: left;
width: 11em;
max-height: 2em;
text-align: center;
padding: .5em 0 0 0;
}
#navigation li:first-child {
border-left: 0;
}
#navigation li:last-child {
border-right: 0;
}
#navigation li a {
color: #fff;
text-decoration: none;
}
#navigation li a:hover {
color: #fff;
border: 0;
text-decoration: underline;
}
/* --------------------------------------- */
/* -------- Navigation 2 -------- */
#navigation2 {
float: left;
margin: 0 0 0 0;
position: relative;
padding-left: 5.4em;
text-transform: uppercase;
}
#navigation2 ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#navigation2 li {
font-weight: bold;
display: inline;
list-style: none;
display: block;
float: left;
max-width: 3em;
max-height: 2em;
text-align: center;
padding: .5em 0 0 0;
margin-right: 1em;
}
#navigation2 li:first-child {
border-left: 0;
}
#navigation2 li:last-child {
margin-right: 0;
}
#navigation2 li a {
color: #fff;
text-decoration: none;
}
#navigation2 li a:hover {
color: #fff;
border: 0;
text-decoration: underline;
}
/* --------------------------------------- */
Never mind regarding the media query not working, I didn't place it at the bottom of the CSS (duh!)
I would recommend you look into media queries.
Media queries are not all that difficult to use. You still have your regular CSS and on the bottom, you add:
#media only screen and (max-device-width: 480px) {
...
}
Inside the curly braces, you specify only the changes you want IF the screen is narrower than 480px.
#media only screen and (max-device-width: 480px) {
p {
color: red;
}
}
This would change all paragraph text to red, as soon as you make your browser window narrower than 480px. Of course, this is a little silly example. Most of the time you are more concerned about width or display of certain elements.
In your case, you probably want to target the navigation divs in those cases and have them behave differently, i.e.:
#media only screen and (max-device-width: 480px) {
#navigation2 {
float: none;
clear: both;
}
}
Note, the above is probably not what you want. I just did some dummy changes to show what is possible.
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;
}
}