This should be an easy one - I'm just missing something simple, I'm sure.
I have a header and want a nested, centered horizontal menu.
#header {
background:url(images/headers/header.gif);
margin: 0 auto;
height: 207px;
width: 100%;
}
/* =Menu
-------------------------------------------------------------- */
#access {
background: transparent;
display: block;
text-align: center;
float: left;
margin: 150px auto 0;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 120px;
width: 766px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0 auto;
}
#access .menu-header li,
div.menu li {
background-color: #444;
margin: 0 auto;
float: left;
text-align: center;
width: 110px;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #444;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
site: http://74.86.183.200/~riaharb/stage/
Thanks in advance!
That's not hugely tricky, this should work:
#parent_ul {
width: 80%;
text-align: center;
margin: 0 auto;
}
#parent_ul > li {
display: inline; /* or inline-block */
}
Related
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
I have a vertical menu which I want to make horizontal. I have tried placing display:inline tag but it does not do the job. Please guide. Thanks.
#access div {
margin: 0;
width:140px;
}
#access {
clear: both;
display: block;
float: left;
}
#access ul {
font-size: 11px;
list-style: none;
margin: 0;
padding: 0;
}
#access li {
line-height: normal;
position: relative;
display:inline;
}
#access a {
color: #B25326;
display: block;
padding: 4px 0;
text-decoration: none; font-size: 10px;
text-align:right; text-transform:uppercase;
line-height: normal;
}
#access a:hover {
color: #000000 !important;
}
#access ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
margin: 0;
position: absolute;
top: 3.333em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
}
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: none;
}
#access li:hover > a,
#access a:focus {
color: #000000;
}
#access ul li:hover > ul {
display: block;
}
#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
font-weight: bold;
}
First take the width off from the div and then you can use:
#access li {
float:left;
}
My CSS Menu pops the browser's horizontal scroll bar on and off as I hover over menu items. I've tried various combinations of css to deal with overflow using;
overflow-x:hidden;
and
overflow-y: auto;
But these just cut off my drop down elements in the menu and puts in a scroll bar inside my menu.
Here's my source code for the menu:
/* Main Menu*/
#menu {
font-family: 'sharetech', sans-serif;
float: right;
height: auto;
font-size: 18px;
padding: 0;
margin: 14px 0 0 0;
}
#menu a {
display: block;
line-height: 1em;
text-decoration: none;
color: gray;
padding: 2px 10px;
}
#menu:after, #menu ul:after {
content: '';
display: block;
clear: both;
}
#menu ul, #menu li {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul {
position: relative;
z-index: 597;
}
#menu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#menu ul li.hover,
#menu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#menu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#menu ul ul li {
float: none;
}
#menu ul ul ul {
border-top: 0 none;
top: 0;
left: auto;
right: -99.5%;
}
#menu ul li:hover > ul {
visibility: visible;
}
#menu ul ul {
bottom: 0;
left: 0;
margin-top: 0;
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#menu ul ul a{
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 10px 10px;
}
#menu ul ul li {
font-weight: normal;
position: relative
}
#menu > ul > li > a {
line-height: 48px;
}
#menu ul ul li:first-child > a {
border-top: 1px solid #0082e7;
}
#menu ul ul li:hover > a {
background: #35a6ff;
}
#menu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#menu ul ul li:last-child:hover > a {
border-radius: 0 0 0 3px;
}
#menu ul ul li.has-sub > a:after {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#menu ul li:hover > a, #menu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#menu ul li.has-sub > a:after {
margin-left: 5px;
}
#menu ul li.last ul {
left: auto;
right: 0;
}
#menu ul li.last ul ul {
left: auto;
right: 99.5%;
}
You were right Nix, it was in the pseudo classes. I figured it was, here's what was missing;
#fmenu ul ul li {
float: none;
width: 190px; <----set width
}
I defined a set width here and it solved the problem.
I am having some problems with the Sub menu on my site... www.fastfoodforum.co.uk
If you hover over the "forums" item then you will see that the other content of my site jumps, and you will also see small gaps between each sub menu item.
Both of these are very much undesired and I would really appreciate any help in fixing them. I will post the CSS I currently have below, I have been experimenting and trying to fix this for some time so please excuse any messy/dodgy code.
Thanks everyone, really appreciate the help.
#access {
float: left;
margin: 91px 0 0 0px;
width: 550px;
display: block;
}
#access .menu-header, div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul, div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li, div.menu li {
float: left;
margin: 0;
padding: 9px 17px 0 0;
position: relative;
}
#access a {
color: #FFFFFF;
font-size: 13px;
font-weight: bold;
margin: 0;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 80px;
z-index: 99999;
padding-top: 0px;
}
#access ul ul li {
min-width: 80px;
padding-top: 0px;
padding-bottom: 0px;
}
#access ul ul ul {
left: 100%;
top: 0;
padding-top: 0px;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 8px;
width: 80px;
height: auto;
display: inline-table;
}
#access li:hover > a, #access ul ul :hover > a {
color: #fff;
}
#access ul li:hover > ul {
display: inline-table;
position: relative;
}
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover {
color: #fff;
}
Try to change this:
#access ul li:hover > ul {
display: inline-table;
position: relative;
}
to this:
#access ul li:hover > ul {
display: block;
}
I'm pretty sure this is an easy fix and I am simply too in experienced to figure it out. I'm building a site, using WP, but the home page is simply a background image with a vertical nav menu. I don't now how to make the menu stay in the same place for all browsers and windows. It looked good on my screen, then I found the nav pane was in a completely different place on my husband's monitor. I believe it has to do with position and display and margins, but I am getting more lost as I read up on these and I just want someone to tell me the code.
The page is at www.sydneyjanebaily.com
So far the code for the whole page is as follows:
body {
background-image:url(http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png);
background-repeat:no-repeat; background-attachment:fixed;
background-position:center;
}
menu { display: block; }
access div { display: block; margin-left:890px; margin-right:auto; margin-top:200px; width: 235px; }
/************* Navigation **********/
nav#access ul, nav#access li.pagenav { display: block; list-style:
none; }
nav#access ul li a span, nav#access ul li.page_item a span { position:
absolute; right: 100%; top: 2px; width: 15px; height: 100%;
background-image: url(../images/nav-shadow.png); background-position:
right top; background-repeat: repeat-y; }
nav#access ul li a, nav#access ul li a:visited, nav#access ul
li.page_item a, nav#access ul li.page_item a:visited { display:
block; padding: 8px 10px 8px 30px; color: white; font: 150%
"EBGaramondSC", "Palatino", "Palatino Linotype","Book Antiqua",
Georgia, serif; text-decoration: none; /*background-color:
aba000; */ margin: 5px 0 7px 0; position: relative; width: 235px; /font-variant: small-caps;/ }
nav#access ul li a:hover, nav#access ul li a:focus, nav#access ul
li.page_item a:hover, nav#access ul li.page_item a:focus{ color:
FF0000; }
nav#access li a:hover span { background-color: #666; } nav#access ul
li a em { font-size: 87.50%; } nav#access ul li:nth-child(5n-4) a,
nav#access ul li:nth-child(5n-4) a span { ; } nav#access ul
li:nth-child(5n-3) a, nav#access ul li:nth-child(5n-3) a span { ; }
nav#access ul li:nth-child(5n-2) a, nav#access ul li:nth-child(5n-2) a
span { ; } nav#access ul li:nth-child(5n-1) a, nav#access ul
li:nth-child(5n-1) a span { ; } nav#access ul li:nth-child(5n-5) a,
nav#access ul li:nth-child(5n-5) a span {; } -->
nav#access ul li ul li span { position: absolute; right: 100%; top: 0;
width: 20px; height: 100%; left: 2px; margin-right: 15px; overflow:
visible; } nav#access ul li ul li:nth-child(odd) a { background:
none; color: #EEE8AA; font-size: smaller; margin: 3px 20px 5px 20px;
min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access
ul li ul li:nth-child(odd) a:hover, nav#access ul li ul
li:nth-child(odd) a:focus { background: none; color: #ADFF2F;
font-size: smaller; left: 15px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li:nth-child(odd) a span { background:
url(../images/sub-menu2.png) -5px 0px no-repeat; width: 30px; }
nav#access ul li ul li:nth-child(even) a { background: none; color:
3B3C1D; font-size: smaller; margin: 3px 20px 5px 20px; min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access ul li ul
li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even)
a:focus { background: none; color: #FF4500; font-size: smaller; left:
15px; padding: 2px 30px 2px 25px; } nav#access ul li ul
li:nth-child(even) a span { background: url(../images/sub-menu2.png)
-5px 0px no-repeat; width: 30px; }
nav#access ul li ul li ul li:nth-child(odd) a { background: none;
color: #FFD700; font-size: smaller; margin: 3px 20px 5px 30px;
min-height: 20px; width: 200px; padding: 2px 0 2px 20px; } nav#access
ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul
li:nth-child(odd) a:focus { background: none; color: #EEE8AA;
font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li ul li:nth-child(odd) a span { background:
url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }
nav#access ul li ul li ul li:nth-child(even) a { background: none;
color: #3B3C1D; font-size: smaller; margin: 3px 20px 5px 30px;
min-height: 20px; width: 200px; padding: 2px 0 2px 20px; } nav#access
ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul
li:nth-child(even) a:focus { background: none; color: #7FFFD4;
font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; }
nav#access ul li ul li ul li:nth-child(even) a span { background:
url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }
nav#access ul li a:hover:active, nav#access ul li ul li
a:hover:active, nav#access ul li ul li ul li a:hover:active,
nav#access ul li a:focus:active, nav#access ul li ul li
a:focus:active, nav#access ul li ul li ul li a:focus:active { color:
00CCFF; left: 1px; top: 1px;}
/* Singular navigation */
nav-single { float: right; position: relative; top: -0.3em; text-align: right; z-index: 1; }
nav-single .nav-previous,
nav-single .nav-next { float: none; width: auto; }
nav-single .nav-next { padding-left: .5em; }
img.book {
/* Set rules to fill background */
min-height: 100%;
min-width: 1000px;
/* Set up proportionate scaling */
height: auto;
/* Set up positioning */
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
<!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"
width="880" height="xxx" /> -->
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',
'twentyeleven' ); ?>">
"> -->
'primary' ) ); ?>
I am puzzled that when I inspect an element using Firefox developer tool, it still says inline element for things I've marked as block.
Basically, I can put the nav pane where I want using px but it only looks right on my screen. I think I need percentages, but that is beyond me. Please help.
Thanks,
Sydney
Try replacing this:
#access div {
display: block;
margin-left:890px;
margin-right:auto;
margin-top:200px;
width: 235px;
}
with this:
#access div {
position: absolute;
top: 20%;
left: 50%;
}
It works well on my monitor no matter how I squash or stretch the screen, and it should work for you as well. Good luck!