I'm trying to center the Menu Links but I can't. (Link to my website). As you can notice, the 'Home' and 'Staff' links are aligned at the left side of the page, but I want them to be centered. (With percentage, if possible)
Here you have the CSS Code
/*Navigation*/
#menu {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #1C1C1C;
margin-top:85px;
}
#menu li {
float: left; }
#menu li a {
display: block;
padding: 30px 30px;
text-decoration: none;
font-weight: bold;
color: #fff;
transition: background-color 0.5s ease;
transition: color 0.5s ease;
}
#menu li a:hover {
color: #69bfe7;
background-color: #2E2E2E;
transition: background-color 0.5s ease;
transition: color 0.5s ease;
}
Here the HTML Code
<!-- Here's all it takes to make this navigation bar. -->
<ul id='menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Staff</a></li>
</ul>
<!-- That's it! -->
Try this:
#menu {
background-color: #1c1c1c;
float: left;
list-style: outside none none;
margin: 85px 0 3em;
padding: 0;
text-align: center;
width: 100%;
}
#menu li {
display: inline-block;
/* float: left; */
}
This should do the trick:
#menu {
width: 100%;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #1C1C1C;
margin-top:85px;
text-align: center;
}
#menu li {
display: inline-block;
}
Related
I am having a ton of trouble. I am trying to create a drop down menu from 'about' and have not been able to center the menu correctly. It is always right of the menu. I believe it to have to do with the size of 'about'.
How can I fix this?
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
height: inherit;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
background: transparent url(../images/nav-divide.png) no-repeat right center;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
}
.nav-top:hover ul {
display: inline;
}
.nav-top li {
float: center;
background-color: #e9e9e9;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul>
<li>Services</li>
<li>Clients</li>
<li>Press</li>
<li>Leadership</li>
<li>Twitter</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
Andrews:
To solve you problem, you need to indicate the position of your nested list because you are setting it up as "position: absolute" without coordinates.
Add a "left value" to your UL CSS class in order to solve this issue:
.nav-top ul {
display: none;
position: absolute;
left: 0;
}
I'm building a site for a client and I'm having trouble getting the drop down menu to appear clear below the navbar - instead it is overlapping the navbar, and if I increase the top margin of the drop down menu to push it below the navbar there is a gap between the drop down and the parent list item where the hover property to make it appear does not take affect.
I've created a fiddle of the navbar here - http://jsfiddle.net/s4dpby4v/1/
And you can view the live version here - http://japesfawcett.com/ps/index.html
HTML:
<div class="header">
<div class="logo">
<h1>PAM SHAW INTERIORS</h1>
</div>
<nav>
<ul>
<li>ABOUT</li>
<li class="has-drop">
WORK +
<ul class="drop-down">
<li style="padding-bottom: 0;">COMMERCIAL</li>
<li style="padding-right: 80px; padding-bottom: 0;">RESIDENTIAL</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
CSS:
.header {
width: 100%;
background-color: #fff;
margin: 0 auto;
height: 75px;
z-index: 9999;
}
.logo h1 {
float: left;
font-size: 20px;
letter-spacing: 4px;
width: 25%;
padding-top: 10px;
margin-top: 18px;
margin-left: 75px;
font-weight: 300;
}
.logo a {
text-decoration: none;
color: #000;
}
nav {
font-family: 'Lato', sans-serif;
width: 60%;
font-size: 14px;
font-weight: 300;
text-align: right;
letter-spacing: 4px;
float: right;
margin-top: 19px;
margin-right: 75px;
}
nav ul {
float: right;
list-style: none;
padding-top: -5px;
}
nav li {
padding-left: 15px;
padding-right: 10px;
padding-bottom: 15px;
display: inline-block;
}
nav ul li ul.drop-down {
width: 100%;
background: #fff;
display: none;
position: absolute;
z-index: 999;
padding: 5px 0 5px 0;
margin: 15px 0 0 0;
left: 0;
line-height: 2.5;
clear: both;
border-top: 1px solid #F1F1F1;
}
nav li:hover ul.drop-down {
display: block;
}
nav ul li ul.dropdown li {
display: block;
padding: 0;
margin: 0;
}
nav li a {
text-decoration: none;
color: #000;
display: inline-block;
}
nav li a:hover {
text-decoration: none;
color: #CCC;
-webkit-transition: all 800ms ease;
-moz-transition: all 800ms ease;
-ms-transition: all 800ms ease;
-o-transition: all 800ms ease;
transition: all 800ms ease;
}
Any guidance or help would be greatly appreciated!
.has-drop {position: relative;}
nav ul li ul.drop-down {width: auto;}
nav li li {width: 100%; text-align: center; box-sizing: border-box;}
Will clean up you drop down, you just need to remove the inline styles that you have on here to fix up the list styles.:
<li style="padding-bottom: 0;">COMMERCIAL</li>
<li style="padding-right: 80px; padding-bottom: 0;">RESIDENTIAL</li>
Here is my fiddle: http://jsfiddle.net/s4dpby4v/6/
You can check with this css
.has-drop {
padding-bottom: 30px;
}
nav ul li ul.drop-down
{
margin: 27px 0 0;
}
I have a nav list that i centered, but there is some default spacing that i don't want. Also in the fiddle example you can't see it, but on my end the nav list isn't really centered with the same css etc. Maybe someone can look at the code to see if it really centers the nav list.
--> Fiddle
<header>
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Work</span></li>
<li><span>Information</span></li>
</ul>
</nav>
</header>
You should remove the whitespace between the li elements. As example jsFiddle
<ul>
<li><span>Home</span></li><li>
<span>Work</span></li><li>
<span>Information</span></li>
</ul>
You can set font-size: 0 to ul element and on li the one you want. For example:
/************************************************
Site Name:
Author:
************************************************/
html {
margin: 0;
padding: 0;
position: relative;
min-height: 100%;
overflow-y: scroll;
}
body {
font-family: regular, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
color: #111;
}
body,
input,
textarea,
select,
button {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
b,
strong {
font-weight: normal;
}
a,
a:visited {
color: #111;
text-decoration: underline;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
h1,
nav {
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
background-color: transparent;
}
h1 {
margin: 0 0 26px 0;
}
p {
margin: 0 0 16px 0;
background-color: transparent;
}
p a:hover,
a:focus,
a:active {
color: #111;
text-decoration: none;
}
h1 a,
a:visited {
color: #111;
text-decoration: none;
}
h1 a:hover,
a:focus,
a:active {
color: #111;
text-decoration: underline;
}
.center {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: green;
}
/************************************************
Header - Footer - Navigation
************************************************/
header {
position: fixed;
width: 100%;
line-height: 55px;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.70);
}
/* Navigation */
nav {
display: block;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 0;
/*set font size 0*/
}
nav li {
display: inline-block;
padding: 0 0;
font-size: 16px;
}
nav a {
position: relative;
display: block;
color: white;
text-decoration: none;
background-color: red;
}
nav a:visited,
a:active {
color: white;
text-decoration: none;
}
nav a:hover span {
transition: none;
text-decoration: none;
border-bottom: 2px solid white;
}
/* Dropdown */
/*nav li:hover a {
background-color: #444;
}
nav li ul {
position: absolute;
float: left;
z-index: 1;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav li:hover ul {
opacity: 1;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
color: #999;
}*/
<header>
<nav>
<ul>
<li><span>Home</span>
</li>
<li><span>Work</span>
</li>
<li><span>Information</span>
</li>
</ul>
</nav>
</header>
<div class="center"></div>
You can also set a border to li elements to seperate from each other.
Another way is to use the comment tags between the lines.
<ul>
<li><span>Home</span></li><!--
--><li><span>Work</span></li><!--
--><li><span>Information</span></li>
</ul>
I need to center the nav in this website ( http://beautra.weebly.com/ ), any ideas? Here's the code, I tried playing with the inspect element tool but I couldn't work it out. The code seems simple enough to work out but I don't know how to work with jsfiddle. Any help with that too would be appreciated. Thanks,
/* Navigation --------------------------------------------------------------------------------*/
#topnav {
clear: both;
text-align:center;
background: url(nav-left.png) no-repeat;
padding-left: 8px;
width: 971px;
}
#nav-right {
background: url(nav-right.png) right top no-repeat;
padding-right: 10px;
}
#nav-inner {
background: url(nav-inner.png) repeat-x;
padding: 2px 5px 3px;
}
#topnav ul {
list-style: none;
float: none;
background: url(nav-sep.jpg) no-repeat left center;
}
#topnav ul li {
list-style: none;
float: left;
background: url(nav-sep.jpg) no-repeat right center;
padding-right: 2px;
}
#topnav a {
float: left;
text-align:center;
display: block;
color: #989899;
text-decoration: none;
padding: 19px 38px;
border: 0;
outline: 0;
list-style-type: none;
font-size: .9em;
}
#topnav li#active a,
#topnav a:hover {
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
color: #ed53ae;
background: #090909 url(nav-active.png);
border: 0;
}
I'd suggest making the child ul element inline-block.
#nav-inner > ul {
display: inline-block;
}
And then adding text-align:center to the parent element, #nav-inner.
#nav-inner {
text-align: center;
background: url(theme/nav-inner.png?486154) repeat-x;
padding: 2px 5px 3px;
}
This will ensure that the menu is centered regardless of its dimensions - good for dynamic content (i.e., you don't have to set a fixed width and use margin:0 auto..).
I've made a css dropdown menu and I want each dropdown option to have a blue background when it is hovered on. However when I try this the background for the option will only be blue when the top half of it is hovered on. Here it is on jsfiddle. If you hover your mouse on the "products" option and then put the mouse under "plates" but above the gray horizontal line the background won't be blue. Can anybody help me? Thank you.
http://jsfiddle.net/hDWuJ/1/
HTML (Note this is a segment of my web page and so it does not have valid syntax)
<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
<ul id="drop-nav">
<li>Home</li>
<li>Products <span id="arrowDown">▼</span>
<ul>
<li>Children's Stuff</li>
<li>Plates</li>
<li>Top Sellers</li>
</ul>
</li>
<li>Services <span id="arrowDown">▼</span>
<ul>
<li>Wash 'n' Fold</li>
<li>Blanket Making</li>
<li>Wedding Dress</li>
<li>Custom</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS
body
{
background-color: #dfdfdf;
}
#title
{
text-align: center;
color: #07a8ca;
font-size:60pt;
margin: 0px;
padding: 0px;
text-shadow: 2px 2px 0px #888888;
}
h1
{
margin: 0px;
padding: 0px;
}
hr
{
height: 3px;
color: #07a8ca;
background: #07a8ca;
font-size: 0;
border: 0;
}
#HorzLineDiv
{
width: 95%;
margin: 2% 0% 3% 0%;
margin-left: auto ;
margin-right: auto ;
}
#Menu
{
width:100%;
}
#drop-nav
{
margin: 0 auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
ul li
{
display: block;
position: relative;
float: left;
display: inline;
padding: 12px 50px 8px 50px;
margin: 0px 5px 0px 5px;
border-left: 3px solid #07a8ca;
}
ul li:first-child
{
border-left: 0px;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-transform: uppercase;
text-decoration: none;
text-align:center;
color: #000;
font: 25px/1.1em "Kelly Slab","serif";
transition: color 0.4s ease 0s;
-moz-transition: color 0.4s ease 0s; /* Firefox 4 */
-webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
-o-transition: color 0.4s ease 0s; /* Opera */
}
ul li a:hover
{
color: #FF4D4D;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
}
li:hover a
{
margin:0;
}
li:hover li a:hover
{
background: #21e8fa;
}
#drop-nav li ul li
{
border-top: 0px;
border-left: 0px;
}
#drop-nav ul li a
{
border-top: 3px solid #888;
padding: 13px 0px 13px 0px;
margin: -10px -8px;
text-align:center;
text-transform: none;
position:relative;
top: 13px;
color: #000;
}
#drop-nav ul
{
width:100%;
position:absolute;
right:-5px;
}
a
{
margin:0px;
padding:0px;
}
#arrowDown
{
font-size: 10pt;
vertical-align:text-bottom
}
The main issue is in your margins and padding, but this can be worked around by changing your ul li to display: block; instead of display: inline;.
Of course, this isn't a direct fix to the issue, and there still is an area at the bottom that doesn't work on hover, but it is much smaller than before. The proper way to go about fixing this is fixing your margins and padding.
Demo
UPDATE
Reading deeper into your code, I found the actual problem. It is not in margins or padding as I originally thought, but is a top property of 13px defined in #drop-nav ul li a. That top of 13px was creating a blank, inactive space in your list.
Get rid of that piece and it is working fine: DEMO