I am just asking for your guys help on getting a vertical navigation bar, It's hard to find help over the internet when it's such a specific problem so any answers will be appreciated... this is for the media query at 480 x 800.
#media screen and (min-width:480px) and (max-width:800px){ #header{ height:100px; width:480px; } #nav{ padding: 15px; } #nav li ul{ list-style-type: none; padding: 15px; margin-left: 0; border-right:none; } #nav li a{ text-decoration: none; background-color: #ffffff; display: block; width: 8em; border-bottom:1px solid #eb322c; padding: 15px; }
change media Query css with this css
#media screen and (min-width:480px) and (max-width:800px){
#header{
height:100px;
width:480px;
}
#nav{
padding: 5px;
position: absolute;
left: 0px;
width: 150px;
}
#nav ul {
padding: 5px;
border-left: 1px;
text-align: center;
width: 150px;}
#nav li ul{
list-style-type: none;
padding: 15px;
margin-left: 0;
border-right:none;
}
#nav li a{
text-decoration: none;
background-color: #ffffff;
display: block;
width: 8em;
border-bottom:1px solid #eb322c;
padding: 15px;
}
Related
I am trying to create a hamburger menu for when my screen goes below 1025px but for some reason there is a small gap between my nav and my menu div whenever I make the window use the media query. I am not sure why it is there. When I use developer tools I find no margins around either of them.
nav #menu{
position: relative;
z-index: 999;
float: right;
margin: 0 75px 0 0;
line-height: 50px;
}
nav #menu li{
font-family:"Abril Fatface";
display: inline-block;
padding-left: 50px;
}
nav #menu li a{
color: white;
position: relative;
text-decoration: none;
}
nav #menu li a:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 0%;
border-bottom: 2px solid #c1c1c1;
transition: .3s;
}
nav #menu li a:hover:after{
width: 100%;
}
nav #menu li a:hover{
color: #c1c1c1;
}
#media (max-width: 1024px){
.hamburger{
float: right;
cursor: pointer;
padding: 15px;
display: block;
border-left: .1px solid white;
}
.line{
border-bottom: 4px solid white;
width: 35px;
margin-bottom: 5px;
}
.line:last-child {
margin-bottom: 0;
}
nav #menu{
width: 100%;
overflow: hidden;
padding-right: 0px;
margin: 0;
line-height: 25px;
/* height: 0;*/
}
nav #menu li{
display: block;
width: 100%;
background-color: black;
}
nav #menu li a{
width: 100%;
}
.open{
height: auto;
}
Perhaps try specifying:
nav {
margin: 0 auto;
}
I am trying to place Unsorted List in Navigation but I want it to be in the center of header-box.
<div class="header-box">
<nav>
<ul>
</ul>
</nav>
</div>
http://jsfiddle.net/9zWm9/7/ Here is the fiddle I am using same in my code.
First of all, clear your float.
EDIT: One of my friend has got real problems with div inside , so lets change this.
<div class="header-box">
<nav>
<ul>
<li>AASD</li>
<li>AASD</li>
<li>AASD</li>
<li style="visibility:hidden;opacity:0;height:0;width:0;clear:both"></li>
</ul>
</nav>
</div>
and the styles:
<style>
.header-box {
width: 400px;
height: 49px;
border: 1px solid green;
position: relative;
}
ul {
margin: 0 auto;
padding: 0;
text-align: center;
height: 100%;
margin: 13px auto;
}
nav li {
float: none;
list-style-type: none;
/* padding-left: 19px; */
/* margin-left: 20px; */
/* line-height: 50px; */
display: inline-block;
/* top: 0px; */
margin: 0 auto;
text-align: center;
}
</style>
Use text-align:center; for centering list's and padding for spaces and line-height for vertically center
FIDDLE
css
nav ul li{
display: inline;
list-style-type: none;
text-align:center;
padding:0 1px;
line-height:49px;
}
Please try this code. Working all Broswer
.header-box{
float:left;
width: 400px;
height: 49px;
border: 1px solid green;
position:relative;
}
.header-box nav {
float: right;
left: -50%;
position: relative;
display:block;
}
.header-box nav ul {
left: 50%;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
nav li{
float: left;
list-style-type: none;
line-height: 50px;
padding:0 10px;
position: relative;
}
Working Demo
use margin: 0px auto;
.header-box{
width: 200px;
height: 49px;
border: 1px solid green;
}
nav li{
float: left;
list-style-type: none;
margin: 0px auto;
}
nav ul li{
float: left;
list-style-type: none;
margin: 0px auto;
padding-left: 19px;
}
nav ul {
width : 100%;
position:relative;
float:left;
margin-left:-25px;
}
nav li{
position:relative;
float: left;
margin-left:10px;
list-style-type: none;
}
Replace the CSS with following..
.header-box{
width: 400px;
height: 49px;
border: 1px solid green;
}
nav ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
nav li{
display:inline;
}
THANKS
DEMO
.header-box{
width: 400px;
border: 1px solid green;
text-align:center;
}
nav ul{
padding:0;
}
nav li{
list-style: none;
display:inline-block;
margin-right: 10px;
vertical-align: middle;
}
Please update your css with below code which is with less modification :
.header-box{
width: 400px;
height: 49px;
border: 1px solid green;
text-align:center;
}
nav{
display:inline-block;
}
nav ul{
padding-left:0;
}
nav li{
float: left;
list-style-type: none;
padding-left: 10px;
padding-right: 10px;
}
nav ul li{
float: left;
list-style-type: none;
margin: auto;
padding-left: 20px;
position: relative;
}
Here is the link: http://jessiskiptoncampbell.com/jessi-wp/
At the moment its aligned right, but i want it to be aligned in the center.
#header {
padding: 15px 0 45px 0;
margin-left: auto;
margin-right: auto;
}
{
margin-left: auto;
margin-right: auto;
}
#logobar1, #logobar2 {
display:block;
width:100%;
position:absolute;
center:0px;
z-index:1;
}
#logobar1 {
border-top:2px solid #231f20;
border-bottom:2px solid #231f20;
background-color:#f49cb1;
height:102px;
margin-top:197px;
}
#logobar2 {
background-color:rgba(255, 255, 255, 0.7);
height:80px;
margin-top:208px;
}
#logodiv, #logodiv a, #logo {
display:block;
margin:0 auto;
position:relative;
z-index:2;
}
.nav {
text-align: center;
width: auto;
margin: -45px auto 15px auto;
z-index:3;
position:relative;
font-family:'Montserrat Alternates', sans-serif;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
list-style:none;
}
.nav ul li {
float: left;
margin-left: 8px;
font-size: 14px;
position: relative;
}
.nav ul li a {
display: block;
padding: 2px 20px;
color: #000;
text-decoration: none;
}
.nav ul li a:hover, .nav li.current_page_item a, .nav ul li.current-menu-item a {
color: #931b20;
}
just Give width:100%; for the .jr_logo class
Set up your header image width to this width: 1240px; and it should be centered
your maincontainer has a margin and its is setting everything off...
take your header out of your maincontainer...
its simple.just give your image an id or class..likeke
#myimg
{
float:left;
margin-left:-116px;
}
now it will perfectly become in center.
here it is, this is the css, and the media queries is down below, just search #media and it will find it.
Thanks so much for your help, idk why it is not working, the media query has no effect on the ipad emulator, in portrait mode, i changed the background just to see if it would work and it still did not, so not sure whats going on.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF; text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
img
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
background-color: ;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color: :#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
li:hover ul {
display: block;
}
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.1 {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}
So, the problem is primarily twofold:
1) You have several errors in your css. Using the validator, I found 13 errors.
- There's declarations that are unclosed (missing a closing curly-brace - }), such as your declaration for #nav a:hover
- There's extra / stray closing curly-braces in other locations.
- There's invalid background color and color properties
- You have div.1, which implies a class of "1". That's not a valid class according to the validator.
2) The media query contains far too many rules. You should only put rules in the media query that replace / override previous rules, or are new rules. You've got many rules that are simply repeats of your other common css rules.
Clean up the errors. Try running them through the W3C CSS validator - you can copy-and-paste your css directly, to see if / where there are errors.
Then, simplify your media query css to only include the necessary changed rules (and only the specific properties that need to be changed).
Note: I was able to get it to validate by cleaning up the errors. For your reference, the valid / clean CSS is below.
You still need to simplify, and the code below is not necessarily guaranteed to work. I'd encourage you to over-simplify - put one rule in your media query for a border, background color, or something, just to see if the media query is getting picked up. Then you can work on adding in the different styles you need.
body {background-image:url('../images/space1.jpg');
background-repeat:no-repeat;
background-size:200%;
}
body {
color:white;
}
a, a:visited {
color:#3399FF;
text-decoration:none;
}
div.header{
text-align:right;
font-size:200%;
}
div.header1 {
text-align:right;
font-size:125%;
}
div.logo{
margin-top:-40px;
}
#nav{
width:85%;
height:3%;
font-size: 26px;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 20px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:20%;
padding:10px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:20%;
padding:10px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
div.header{
text-align:right;
font-size:120%;
}
div.header1 {
text-align:right;
font-size:85%;
}
div.logo{
margin-top:-40px;
}
div.logo {
height:150px;
width:320px;
}
#nav{
width:85%;
height:3%;
font-size: 30%;
font-weight: bold;
border-radius: 8px;
text-align: center;
margin: 0 auto;
position:absolute;
top:100px;
left:120px;
}
#nav ul {
height: auto;
padding: 0px 0px;
margin: 0px;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
display: inline-block;
}
#nav li {
display: inline-block;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
#nav a {
text-decoration: none;
color:#3399FF;
padding: 8px 8px 8px 8px;
}
#nav a:hover {
color: #000000;
background-color: #FFF;
}
li:hover ul {
display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
div.qui {
text-align:center;
font-size:200%;
text-decoration:underline;
}
div.specs {
text-align:center;
font-size:175%;
}
ul.qui {
text-align:center;
font-size:150%;
list-style-type: none;
}
.images {
overflow: hidden;
}
.images img {
float: left;
margin: 0px;
}
div.one {
text-align: center;
}
.left {
float: left;
margin-left:0%;
padding:0px;
border:3px solid #585858 ;
}
.right {
float: right;
margin-right:0%;
padding:0px;
border:3px solid #585858 ;
}
p.v {
text-align:center;
}
}
How do I center my navigation bar links using CSS while keeping the sides grey?
Blogs and History have a drop a down menu. Here is a screenshot:
(source: gyazo.com)
CSS:
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
width: 100px;
background-color: #444444;
text-align: center;
border-right: 1px solid white;
position: relative;
height: 30px;
line-height: 30px;
}
.navbar li ul li {
float: none;
width: 150px;
text-align: left;
padding-left: 5px;
border-top: 1px solid white;
}
.navbar a {
text-decoration: none;
color: white;
}
.navbar li ul {
position: absolute;
top: 30px;
left: 0;
visibility: hidden;
}
.navbar li:hover ul {
visibility: visible;
}
.navbar li:hover {
background-color: maroon;
}
Edited my answer.. I've made your Container div clear the float, and set a defined width to navbar.
http://jsfiddle.net/jFdhM/
#container {
border-radius: 10px;
box-shadow: 3px 3px 4px;
padding: 8px;
background-color: #FFFFFF;
width: 748px;
margin: 0 auto;
}
#top {
width: 748px;
}
.navbar {
width: 505px;
margin:0 auto;
}
.navbar ul {list-style:none; padding:0; margin: 0 auto;text-align: center;}
.navbar li {float:left; width:100px; background-color:#444444; text-align:center;
border-right:1px solid white; position:relative;
height:30px; line-height:30px;}
.navbar li ul li {float:none; width:150px; text-align:left; padding-left:5px;
border-top:1px solid white;}
.navbar a {text-decoration:none; color:white;}
.navbar li ul {position:absolute; top:30px; left:0; visibility:hidden;}
.navbar li:hover ul {visibility:visible;}
.navbar li:hover {background-color:maroon;}
#maincontent {
clear: both;
padding: 10px;
font-family: "Microsoft Sans Serif";
font-size: medium;
}