I've put into my page media queries so when you view on a mobile device you get the responsive 'burger' menu to see the navigation.
The responsive menu seems to be working ok but I've ended up getting lost and confused within my CSS as to how to get the responsive menu only show on a mobile as it shows on desktop too.
The navigation has a class set to nav-collapse. Here's the live URL that I'll temporarily post, but the CSS used is below:-
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 550px;
float: right;
margin: 10px 20px 0 0;
}
.nav-collapse li {
float: left;
width: 100%;
}
.nav-collapse a {
color: #000;
text-decoration: none;
width: 100%;
background: #f7d223;
font-family: 'DINLightRegular', Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 0.7em 1em;
float: left;
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
#media only screen and (max-width: 640px) {
.nav-collapse li {
width: 25%;
*width: 24.9%; /* IE7 Hack */
_width: 19%; /* IE6 Hack */
}
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 530px;
margin: 16px 10px 0 10px;
}
.nav-collapse a {
margin: 0;
padding: 1em;
float: left;
text-align: center;
border-bottom: 0;
}
.nav-collapse ul ul a {
display: none;
}
}
#media only screen and (max-width: 480px) {
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 340px;
margin: 16px 10px 0 10px;
}
}
How do I show burger menu only on mobile and standard navigation on desktop in this CSS?
As Huangism states, the most common method to achieve this is to hide by default for desktop/tablet with the rule display: none.
Then when your media query is active for a specific size, change to display:block or inline, inline-block, etc as your situation warrants.
It is not clear what he nav-collapse rules are intending to accomplish. There are conflicts present in the rules displayed.
A simple change of the display: rule will show/hide as needed.
Related
I sometimes want to recode responsive navigations to be mobile-first instead of having styles that adjust to smaller user devices.
Manually recoding CSS to reverse the style cascade from max-width to min-width isn't as quick as I was hoping.
Sample of CSS that could be recoded to be mobile-first: http://codepen.io/bl4ckdu5t/pen/vOBRqL
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
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 480px 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://s30.postimg.org/68factszx/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;
}
}
I don't know any tool that can help you with that. Here's a good article that can help you to do the changes manually:
link
max-width is the maximum width at which these styles will be shown. A screen wider than the specified number will not use the styles associated with that rule.
Similarly, min-width is the minimum width at which these styles will be shown. A screen narrower than the specified number will not use the styles associated with that rule.
I'm needing to center my navigation menu. Currently the text is at the left and I'm not sure what I must change in my code in order to move it.
Could you check out my page and see what needs to be done? http://www.studywithstyleblog.com
And here is some of the code...
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
text-align: center;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: none; /* none = centre */
display: inline-block;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: -5px;
position: absolute;
width: 300px; /* Change Width Of DropDown Menu */
z-index: 9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 300px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/-------- Begin Drop Down Menu -------/
Thank you in advance!
Add the following css after your existing css. You could also go back and make these changes to your exiting CSS;
#menus {
text-align: center;
}
#menus > li {
float: none;
display: inline-block;
}
NOTE - You will need to play around with your borders on the main menus, and also the sub menu positioning. In future try to add your code to a jsfiddle and post that, this lets us give you a realtime example of the effects of the code we suggest.
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 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;
}
}