I have used text-align: center inside, but .main-nav was not effected. What is the best way to center this navigation?
/***** Navigation *****/
.main-nav { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: left; position: relative; }
.main-nav li a { display: block; color: #333131; font-size: 16px; font-size: 1rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 30px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
Your nav container should have below property to make it center: I have not tested. if you want exact solution create fiddler or share HTML code as well.
.navContainer{
width:100px; <!-- This value can be any -->
margin: 10px auto; <!-- first value of margin can be any -->
}
Related
This is the menu I'm talking about
I'm having this problem that I can't solve... why it doesn't center?
I've already tried a lot of stuff here on this website, but I can't understand it all, can someone help me with the problem and try to explain to me how to center it?
.menu {
font: 16px 'Dosis', sans-serif; font-weight: 600;
list-style: none;
margin: 0;
padding: 0;
float: left;
border: none;
}
.menu li { position: relative; float: left; }
.menu li a {
color: #FFF;
text-decoration: none;
list-style: none;
display: block;
margin: 0;
padding: 14px 11px 0 11px;
height: 36px;
}
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; }
.menu li ul {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
background: #F60;
display: none;
float: left;
z-index: 999;
}
.menu li:hover ul ul { display: none; }
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; }
.menu li ul li { display: block; width: 200px; }
li.border0 { border: none; }
.menu li ul li ul { z-index: 998; top: 0px; left: 200px; }
body { behavior: url(csshover.htc); }
<ul class="menu">
<li>INÍCIO</li>
<li>PROGRAMAÇÃO</li>
<li>HOSPEDAGEM</li>
<li>SUBMISSÃO</li>
<li>LOCAL</li>
<li>INSCRIÇÃO</li>
<li>CONTATO</li>
</ul>
You need to set text-align: center for .menu and unfloat a menu items:
(I've added background: teal; for visibility of white words)
.menu {
font: 16px 'Dosis', sans-serif; font-weight: 600;
text-align: center;
list-style: none;
margin: 0 auto;
padding: 0;
background: teal;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
color: #FFF;
text-decoration: none;
list-style: none;
display: block;
margin: 0;
padding: 14px 11px 0 11px;
height: 36px;
}
.menu li a:hover { color: #FC0; background: #F60 url(../imgs/bg-menu2.png) repeat-x; }
.menu li ul {
position: absolute;
margin: 0;
padding: 0;
top: 50px;
left: 0px;
background: #F60;
display: none;
float: left;
z-index: 999;
}
.menu li:hover ul ul { display: none; }
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul { display: block; }
.menu li ul li { display: block; width: 200px; }
li.border0 { border: none; }
.menu li ul li ul { z-index: 998; top: 0px; left: 200px; }
body { behavior: url(csshover.htc); }
<ul class="menu">
<li>INÍCIO</li>
<li>PROGRAMAÇÃO</li>
<li>HOSPEDAGEM</li>
<li>SUBMISSÃO</li>
<li>LOCAL</li>
<li>INSCRIÇÃO</li>
<li>CONTATO</li>
</ul>
I am working on a new wordpress site website and running into a CSS problem with the dropdown menus. Currently they are left-aligned to the main menu or parent menu item. My preference is for them to be centered on the main menu or parent menu item.
Here is a link to the site in development: http://centraltexasdistrict.com/welcome/
Here is a link to an image, which gives an idea of what I'm looking for or trying to achieve: http://centraltexasdistrict.com/wp-content/uploads/CTD-menu.jpg
Here is the current css I'm working with:
.menu-main-container {
margin-left: auto;
margin-right: auto;
width: 690px;
padding: 0 0 0 20px;
height: 35px;
z-index: 10;
line-height: 35px;
}
.menu-main-menu-container ul li ul{ text-align:center; }
.main-navigation {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 36px;
position: relative;
}
#navbar {
display: block;
height: 36px;
width: 100%;
margin-top: -27px;
z-index: 10;
position: absolute;
}
#site-navigation {
padding: 0px;
height: 30px;
z-index: 10;
line-height: 30px;
float: left;
}
ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 0px;
}
.nav-menu li {
display: inline-block;
position: relative;
}
.nav-menu li a {
display: block;
font-family: 'Lato', sans-serif;
line-height: 30px;
color: #aaaaaa;
font-weight: 400;
text-align: center;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 1px;
float: left;
font-size: 12px;
padding: 30px 7px 0px 7px;
margin-bottom: 5px;
}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
color: #ffffff;
background-color: #353535;
}
.nav-menu .sub-menu,
.nav-menu .children {
background-color: #e07726;
padding: 0px;
position: absolute;
z-index: 99999;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
margin-top: 65px;
}
.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 100%;
top: 0;
}
.sub-menu {
text-align: center;
width: 100%;
left: auto;
}
.sub-menu li {
display: inline-block;
width: auto;
padding: 0px;
}
.sub-menu li a {
display: block;
height: 24px;
font-family: 'Lato', sans-serif;
line-height: 24px;
font-weight: 400;
text-align: left;
text-decoration: none;
text-transform: none;
letter-spacing: 1px;
float: left;
font-size: 11px;
padding: 2px 10px 2px 10px;
color: #ffffff;
white-space: nowrap;
}
.sub-menu li:hover > a,
.sub-menu li a:hover,
.sub-menu li:focus > a,
.sub-menu li a:focus {
background-image: none;
color: #ac5411;
background-color: transparent;
}
ul.nav-menu ul a,
.nav-menu ul ul a {
color: #fff;
margin: 0;
}
ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul,
ul.nav-menu .focus > ul,
.nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
color: /* #333333 */;
}
A quick solution could be to give the submenu a specified width:
ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: 200px; /* width for the submenu */
left: 50%; /* position it 50% to the left */
margin-left: -100px; /* negative margin half of with to center it */
}
Or use translate if you dont want to have a specified width (not for all old browsers and you may need some prefixes):
ul.nav-menu li:hover > ul, .nav-menu ul li:hover > ul, ul.nav-menu .focus > ul, .nav-menu .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
transform: translate(-50%, 0);
left: 50%;
}
.menu-main-menu-container ul li ul{
text-align:center;
}
Add the above code in your stylesheet to center drop down list of menu bar
Hi I am having trouble shifting a menu list on my wordpress site to the left. It appears as if there is a margin so when the list contains so many items it appears right offset and no longer centred. The site in question is www.cabinboys.ca the menu I'm talking about is right below the cabinboys image filled with two letter items. If any one could look at my css and see if they could figure out how to shift the list items to the left that would be much appreciated thanks.
/* =Menu
----------------------------------------------- */
#menu {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
margin-bottom: 25px;
padding: 10px;
text-align: right;
width: 800px;
}
#menu img {
margin-bottom: 10px;
}
#menu a {
color: #666;
font-family: 'Oswald', Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu a:hover {
color: #36bcab;
}
#menu ul {
list-style: none;
margin: 0;
padding-left: 30;
}
#menu li {
float: right;
position: relative;
}
#menu ul ul {
display: none;
float: right;
position: absolute;
right: 0;
z-index: 99999;
}
#menu ul ul ul {
right: 100%;
top: 0;
}
#menu ul ul a {
background: #e9e9e9;
border-bottom: 1px solid #e1e1e1;
display: block;
font-size: 14px;
height: auto;
line-height: 1em;
margin: 0 ;
padding: .8em .5em .8em 1em;
width: 130px;
}
#menu ul ul li:last-of-type a {
border-bottom: none;
}
#menu li:hover > a,
#menu ul ul :hover > a {
color: #36bcab;
}
#menu ul ul a:hover {
background: #36bcab;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul li.current_page_item > a,
#menu ul li.current_page_ancestor > a,
#menu ul li.current-menu-item > a {
color: #111;
}
#menu ul:after {
clear: both;
content: ' ';
display: block;
}
You should add a couple of properties to make it work:
#menu-header-menu {
display:table;
margin:0 auto;
padding:0;
}
Nevertheless it's interesting that you say that the shift happened when the number if items in the menu increased, I don't see in the CSS any code that could differentiate the display depending on the number of items. Could you confirm that I understood the situation?
I did the job by make the submenu functioning, the problem is I can't get the submenu width wider than its parent.
when i hover, its messed up as you can see in fiddle links i provided below
please take a look at this http://jsfiddle.net/wR5L5/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
padding: 0;
}
.navigation ul li {
position: relative;
display: inline;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
there is a flexible menu .sub class http://jsfiddle.net/wR5L5/12/
.navigation {
height: 35px;
background: #333;
}
.navigation ul {
margin: 0;
position: relative;
padding: 0;
}
.navigation ul li {
display: inline;
position: relative;
}
.navigation ul li a {
text-transform: uppercase;
color: #fff;
font-weight: 700;
line-height: 35px;
padding: 6px 8px;
text-shadow: 0px 0px 1px #ff170f;
}
.navigation ul li a:hover {
text-decoration: none;
color: #FF3E36;
border-bottom: 2px solid #FF3E36;
}
.navigation ul li:hover ul {
left: 0;
}
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
float: left;
width: auto;
min-width: 100%;
background: #999;
font-size: 13px;
}
.navigation ul .sub li {
padding-top: -4px;
float: none;
white-space: nowrap;
clear: both;
background: #fff;
}
.navigation ul .sub li a {
text-shadow: none;
color: #333;
display: block;
float: none;
width: 100%;
}
.navigation ul .sub li a:hover {
color: #ff3e36;
border-bottom: none;
text-shadow: none;
}
.navigation ul .sub li:hover {
background: #333;
}
Give width to the sub menu to get submenu wider than main menu.
.navigation ul .sub {
position: absolute;
z-index: 9999;
left: -9999px;
width: 150px;
font-size: 13px;
}
So I'm working on a drop menu and I'd like each menu item to have an auto width. i.e. the background to expand to the width of the menu item rather than having an overall fixed width for all the UL. I thought that giving the ul li an auto width would sort it but it seems not. What am I missing?
<ul id="nav">
<li><a class="last" href="#">MENU ▼</a>
<ul>
<li>Short</li>
<li>Very Long</li>
</ul>
</li>
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav li {
float: right;
position: relative; padding: 0;
}
#nav li a {
display: block;
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
position: absolute;
right: 0em;
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
float: none;
position: static;
width: auto;
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
#nav li ul li a {
background: #222;
}
#nav li ul li a:hover {
color: #666;
}
Your #nav li style is being applied to all child li elements, so you need to use the ">", which selects only the immediate child.
Here is updated CSS which fixes the problem. I also commented out some other CSS that was interfering:
#nav {
height: 1;
list-style-type: none;
padding-top: 1.25em;
margin-top: 0em;
}
#nav > li { /* Added ">" */
float: right;
position: relative;
padding: 0;
}
#nav li a {
display: inline-block; /* was block */
font-size: 14px;
padding: 0 1em;
margin-bottom: 1em;
color: #333;
text-decoration: none;
border-left: 1px solid #333;
}
#nav .last, #nav li ul li a {
border-left: none;
}
#nav li a:hover, #nav li a:focus {
color: #666;
}
#nav li ul {
opacity: 0;
/*position: absolute;
right: 0em; */
list-style-type: none;
padding: 0; margin: 0;
}
#nav li:hover ul {
opacity: 1;
}
#nav li ul li {
/*float: none;
position: static;
width: auto;*/
height: 0;
line-height: 0;
background: none;
text-align: right;
margin-bottom: .75em;
}
#nav li:hover ul li {
height: 25px;
line-height: 2.5em;
}
You are using display: block for your links. That causes them to fill the available space. That's why they are all the same width. And float: right is contributing to the general narrowness. Use inline-block instead of block and prevent the link wrapping by using white-space: nowrap:
Demo: http://jsfiddle.net/neJty/2/