The menu bar itself is centered but the buttons inside the bar aren't. Any ideas on how to fix it?
I really don't know what I'm doing so any help is appreciated :D.
.main-navigation {
clear:both;
display:block;
float:left;
width:100%;
}
nav.main-nav .container {
padding:0;
text-align:right;
}
.container {
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
}
ul#primary-menu li a {
color:#404040;
font-size:14px;
font-weight:100;
letter-spacing:2px;
margin-right:35px;
text-decoration:none;
text-transform:uppercase;
}
ul#primary-menu > li > a {
line-height:40px;
}
.main-navigation a {
display:block;
text-decoration:none;
}
Try using this in your ".main-navigation", your menu bar should be centered because its width: 100% as long as it is your parent element this should work
text-align: center;
Also, try putting this in your ul
display: block;
<!-- if its horizontal -->
display: inline-block;
body, html{
margin: 0;
height: 100%;
}
.nav{
width: 100%;
height: 50px;
background-color: black;
text-align: center;
}
.nav ul{
margin: 0;
list-style-type: none;
}
.nav li{
display: inline-block;
border: 1px solid white;
width: auto;
height: 20px;
margin-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav a{
text-decoration: none;
color: white;
transition: background-color 2s;
transition: color 2s;
}
<div class="nav">
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</div>
Related
I have created a CSS Navigation Bar and its divided into three parts:
1.Left (.logo is class and it placed at the Left)
2.Center (.menu is another class and it placed at the Center)
3.Right (.menu2 is last class and i can't place at the Right correctly)
I want Something Like this and how can I achieve this task:
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav{
position: fixed;
width: 100%;
background-color: #000;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
</nav><!----- nav ------>
You might put the menu2s before the Menu1s in the HTML, and give .menu2 right: 0; and position: absolute;:
nav{
position: fixed;
width: 100%;
background-color: #000;
}
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 {
right: 0;
position: absolute;
}
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
</nav><!----- nav ------>
I am having difficulty changing the font color on my Nav bar heres the HTML.
<div id="nav" class = "menu">
<ul>
<li>Home</li>
<li>Team members
<ul class ="sub-menu">
<li>F.E.A.R Ballard</li>
<li>F.E.A.R Snakeshit</li>
<li>Redi</li>
</ul>
</li>
<li>Cool Stuff</li>
<li>Gallery
<ul class ="sub-menu">
<li>Squad</li>
<li>Dayz</li>
<li>Arma III</li>
</ul>
</li>
<li>Contact
<ul class ="sub-menu">
<li>Teamspeak</li>
<li>E-mail</li>
</ul>
</li>
<li>Facebook</li>
<li>Steam</li>
</ul>
</div><!-- links -->
And the CSS
.menu {
margin: 0px;
width: auto;
}
.menu li {
margin: 0px;
}
/*----- Top Level -----*/
.menu ul li {
display: inline-block;
position: relative;
font-size: 15px;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 100%;
border-top: none;
border-left: 1px solid green;
border-right: 1px solid green;
margin: 0px;
position: absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
}
.sub-menu li {
display: block;
font-size: 10px;
margin-top: 5px;
padding-bottom: 2px;
border-bottom: 1px solid green;
}
.sub-menu li a {
padding:10px 30px;
margin: 5px;
display:block;
}
#nav {
display: inline;
width: 100%;
height: 150px;
background-color: #879396;
}
#nav ul {
text-align: center;
padding: 0px;
background-color: #9C9898;
}
#nav li {
width: 105px;
background-color: #9C9898;
}
#nav li a {
padding: 0px;
margin: 1px;
}
#nav li a:link
{
text-decoration: none;
font-color: #000;
font-weight: bold;
}
I have tried multiple things i just cant seem to get the font color to change at the moment. Please Note i just want the font to change color, it is currently red and blue which looks horrible.
I have been out the game too long, Please advise.
Try this
#nav li a { color: green; }
Remember it's color:value in CSS and not font-color. Also adding :link to an a tag is not necessary. Just use a instead of a:link unless you really need to target links with actual hrefs
You have to provide color for the anchor tag because it don't inherit the color
check this fiddle
a {color: #fff;}
https://jsfiddle.net/Med7at/j4fxj7gw
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.