Since a couple of days I'm working on a navigation bar for my website. But I want to center it . Here's my CSS
.nav{
float:right;width:980px
}
.nav ul {
width: 980px;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
}
.nav li {
float: right;
width: 87px;
text-align: center;
-webkit-transition: border .5s;
-moz-transition: border .5s;
-o-transition: border .5s;
-ms-transition: border .5s;
transition: border .5s;
}
.nav a {
display: block;
width:87px;height: 74px;
}
.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
height: 84px;
}
.nav li span {
display: block;
font-family:"Droid Arabic Kufi";
The float on the nav is unnecessary and the with on the .nav prevents the .nav ul to center.
.nav {
float: right; // Remove this.
width: 100%; // Change this.
}
http://jsfiddle.net/7TBHn/2/
Though in my jsfiddle I use the nav element to be more semantic, but other then that it makes no difference.
Put this in your .nav ul:
margin-left:auto;
margin-right:auto;
This should center it. Hope this helps!
Related
I am currently working on a menu bar that expands vertically upwards. When I change the overflow to visible rather than hidden, the menu expands in the correct place, however the whole menu is visible which I do not want to happen. With overflow:hidden; the menu expands but only when you hover over the partially expanded menu above where I would like it to expand. Can anyone help?
.HomeBottomMenu {
-webkit-font-smoothing:antialiased;
text-align: center;
text-align: justify;
position: fixed;
bottom: 6em;
z-index:9999;
}
.HomeBottomMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.HomeBottomMenu ul ul {
height: 0px;
}
.HomeBottomMenu ul ul:hover {
height:532px;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.HomeBottomMenu ul li{
position: relative;
line-height: 21px;
min-width: 220px;
text-align: center;/* Used to be left*/
background: #424242;
}
.HomeBottomMenu ul li a{
display: block;
padding: 8px 8px;
color: #fff;
text-decoration:none;
text-align: left;
font-family: 'BebasNeueRegular', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
.HomeBottomMenu ul li a:hover{
color: #fff;
background: #25a0da;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
display: hidden;
position: absolute;
left: -0.01em;
overflow: hidden;
}
.HomeBottomMenu ul li:hover .dropdown{
/* Display the initial dropdown */
display: block;
bottom: 100%;
position: absolute;
background: #939393;
min-height: 50px;
}
.HomeBottomMenu ul li ul.dropdowndropdown {
position: relative;
height:100%;
display:inline-block;
bottom:100%;
}
.HomeBottomMenu ul li ul :hover .dropdowndropdown{
position: relative;
display:inline-block;
}
.HomeBottomMenu ul li ul.dropdowndropdown li{
display: inline-block;
/*Colour of level 1, level 2...*/
background-color: rgba(0, 90, 235, 0.33);
bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{
position: relative;
}
.HomeBottomMenu ul li ul.dropdowndropdown li a{
color:#fff;
font-size:16px;
padding: 10px 10px;
text-align:center;
}
.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{
color: #fff;
}
Changed the following and it works now:
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
position: absolute;
left: -0.01em;
overflow:hidden;
display: none;
}
.HomeBottomMenu ul li:hover .dropdown{
display: block;
bottom: 0%;
position: absolute;
background: #939393;
min-height: 50px;
}
I have a menu which is developed using bootstrap. Currently it has a CSS transition effect when you hover over each item I line is placed under each heading. I can't seem to figure out how can I do the same but on top of the heading and the transition effect coming from the other direction.
The code I have so far is
.navbar ul li:after {
content:'';
display: block;
height: 4px;
width: 0;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:hover:after {
width: 100%;
background: #fff;
}
I have created a JSFiddle Here
Thanks in advance for all your help.
.navbar ul li:before,
.navbar ul li:after {
content:'';
display: block;
position:absolute;
height: 4px;
width: 0;
background: #fff;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{ top:0; right:0; }
.navbar ul li:after { bottom:0; left:0; }
.navbar ul li:hover:before,
.navbar ul li:hover:after{ width: 100%; }
http://jsfiddle.net/RokoCB/zpxtre6n/4/
demo - http://jsfiddle.net/zpxtre6n/5/
just add float:right for your .navbar ul li:after and float:left for .navbar ul li:before
.navbar ul li:after, .navbar ul li:before {
content:'';
display: block;
height: 4px;
width: 0;
float:right;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{
float:left;
}
.navbar ul li:hover:after, .navbar ul li:hover:before {
width: 100%;
background: #fff;
}
I'm new to CSS, and if I'm honest don't really know what I'm doing. For a while now I've been trying to make the child page on the dropdown menu to be at least the same width as the parent page.
After hours of being frustrated that nothing I find on google works, I figured that I should ask someone who actually knows what they're doing. This is the (awful) code:
.menu li > a:after {
color: #fff;
content: ' ▼';
}
.menu li > a:only-child:after {
content: '';
}
#main-nav {
background-color: #6699FF;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
display: block;
float: left;
width: 100%;
}
#main-nav li {
position: relative;
}
#main-nav ul {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
position: relative;
list-style: none;
display: block;
}
#main-nav ul li {
float: left;
display: block;
position: relative;
}
#main-nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
}
#main-nav a:link, #main-nav a:visited {
color: #FFF;
display: block;
padding: 10px 25px;
height: 20px;
}
/*Sub menus */
#main-nav {
overflow: visible;
}
#main-nav ul {
right: 0;
}
#main-nav ul li ul.sub-menu {
position:absolute;
display:none;
margin: 0;
padding: 0!Important;
float: none;
}
#main-nav ul li:hover ul.sub-menu {
display:block!important;
float: none;
white-space: nowrap;
}
#main-nav ul li ul.sub-menu li {
background: #6699FF;
text-align: left;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
width: auto;
left:0;
}
#main-nav ul li ul.sub-menu li a {
width: auto;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
This is what it looks like when I hover over the parent 'meep' page:
http://i.imgur.com/rAXvvbP.png?1
I would like it to be the same width, starting from the left so that any excess width due to a long page name would go to the right.
I've tried changing the display type and widths, nothing yet :(
I'd greatly appreciate any help! Thanks in advance
and sorry for the terrible code
JSfiddle: http://jsfiddle.net/q5381Ly5/1/
I only change these two, add width 100%, it will get the whole width of the parent.
here is a demo http://jsfiddle.net/q5381Ly5/4/
#main-nav ul li:hover ul.sub-menu {
display:block!important;
float: none;
white-space: nowrap;
width:100%;
}
#main-nav ul li ul.sub-menu li {
width:100%;
background: #6699FF;
text-align: left;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
left:0;
}
Instead of having width auto to your submenu do change it to 100%
I made my website responsive for tablet and smartphone. I used hover for desktop size, but on mobile size there's hover to. I want to change the hover on the mobile device to a touch without using javascript. I heard something about the no-touch modernizr to change hover to touch event?
nav{
margin-left: 2.7em;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0em;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul {
background: #333333;
padding: 0 1em;
border-radius: 1em;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
nav ul li:hover {
background: #555555;
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li a {
font: 90% helvetica;
display: block;
padding: 1.7em 2em;
color: #ffffff;
text-decoration: none;
}
nav ul ul li {
float: none;
border-top: 0.1em solid #6b727c;
border-bottom: 0.1em solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 1em 2em;
}
nav ul ul li a:hover {
background: #292F41;
}
#media only screen and (max-width:40em)
What do i need to put here to disable the hover function for mobile and make it a touch?
The menu that I built works correctly in all other browsers except IE - what a surprise.
jsfiddle of menu: http://jsfiddle.net/JazParkyn/6jshy/19/
not sure that the fiddle will help though as the menu works correctly on here when viewed in ie, so i'm guessing that it's something to do with my template. I've used the IE edge code and that has made everything else on the site work, does anyone have any ideas?
css:
nav ul ul {
z-index:100;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
}
nav ul li:hover > ul {
z-index:100;
visibility: visible;
opacity: 1;
}
nav ul {
background: #355E95;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #1881B4;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #355E95;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #D5EEFF;
border-bottom: 1px solid #D5EEFF;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #1881B4;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
Any suggestions would be appreciated
This is happening in IE10 and i've forced standards mode with the ie edge meta tag. the jsfiddle will work fine in ie, just not the actual web page.
EDIT: i've just put the following css in and it now magically works
html {
-webkit-font-smoothing: antialiased;
}
However, I still have the issue of the font not rendering properly in safari and opera, i'm guessing something to do with their rendering machines - the font appears to be heavier in weight, has anyone had this happen before?
hmm, the fiddle is working in IE. on your page I would add in the
menu.css (line 51)
#nav ul li {
/* leave the other properties here */
position:relative;
}
and for the submenu (line 56)
#nav ul ul {
/* leave the other properties here */
left:0;
}
Maybe you can add a property to the separator class (just for visual feedback) :
.separator {
cursor: pointer;
}