IS it possible to align menu item center? Actually my website has a lot many menus, So menus are appearing on second line from left so I want to show them as center aligned.Any suggestions?
Please find below my Css. This is edited style sheet of default twenty ten wordpress theme. I am using full width layout.
Thanks.
#access {
background:#cc0000;
margin: 0 auto;
width: 100%;
padding: 0px 0px;
border-top:2px solid #eb9999;
border-bottom:12px solid #000000;
clear:both;
margin-bottom:5px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin: 0 auto;
width: 1024px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 20px;
padding: 0 10px;
text-decoration: none;
}
#access ul{display:inline-block;}
#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;
}
Related
How me doing dropdown menu for pages and child pages on wordpress 4.0, but wp_page_menu not working, wp_list_pages('title_li=') ?> show menu but not show child pages. please help?
Try this:
ul.menu { list-style: none outside none; padding: 0; margin: 0 10px; float: left; font-size: 13px;}
ul.menu li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; }
ul.menu li a { padding: 9px 5px; color: rgb(255, 255, 255); display: block; text-decoration: none; float: left; display: block;}
ul.menu li:hover { background: #A6CB1B; }
.current-cat { background: #8BBF47; }
ul.menu li span { width: 11px; height: 10px; float: left; background: url('/*url of your background or write color anme*/') -561px -78px no-repeat; margin: 11px 0 0 0;}
ul.menu li ul.children {z-index:99; list-style: none outside none; position: absolute; left: 0; top: 31px; background: none repeat scroll 0% 0% rgb(51, 51, 51); margin: 0; padding: 0; display: none; float: left; width: 170px; border-bottom: 1px solid #F8C92D;}
ul.menu li ul.children li { margin: 0; padding: 0; clear: both; width: 170px; border-top: 1px solid #F8C92D;}
html ul.menu li ul.children li a { float: left; width: 145px; background: url('images/narga-sprites.png') -578px -162px no-repeat #A6CB1B; padding-left: 20px; }
html ul.menu li ul.children li a:hover { background: url('/*url of your background or write color anme same as above*/') -578px -162px no-repeat #7BAF36; }
NOTE: This code is untested.Make sure to do necessary changes as per your needs.
I've made a "Sticky Navbar using CSS and HTML5 and I have 4 links to place on the navbar but I can't get them to space themselves Equally now before you say this is a duplicate and all, but first of all none of the solutions worked for me and second, I have a logo in the middle of the navbar... Some help Please!heres my website: catsonfire.tk
<style>
article {
margin: auto;
height:auto;
padding-bottom:10px;
}
header {
margin: auto;
width: 100%;
position: relative;
top: 16px;
height: 60px;
}
footer {
background-color: wheat;
align-content: center;
margin: auto;
width:100%
}
nav {
position: relative;
width: 100%;
}
#header_container ul {
margin: 0;
padding: 0px;
list-style-type: none;
text-align: center;
}
#main {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header_container ul li {
display: inline;
width: 25%;
margin:0;
padding:0;
}
#header_container ul li a {
text-decoration: none;
padding: 39px;
color: #fff;
padding: 12px 0 13px 0;
}
#header_container ul li a:hover {
color: #000;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 1px 1px 1px inset;
-moz-box-shadow: 1px 1px 1px inset;
-webkit-box-shadow: 1px 1px 1px inset;
}
#big {
background: rgba(0, 0, 0, 0.5);
top: 0px;
left: 0px;
right: 0px;
margin: 0px;
width: 100%;
position: absolute;
height: 105px;
}
#header_container {
left: 0;
position: fixed;
width: 100%;
top: 0;
z-index:1000;
height:150px
}
#header {
line-height: 60px;
margin: 0 auto;
}
</style>
Home
About
Your site shows two links, but some thoughts:
#big ul{
display:block;
}
#big li {
display:block;
width:25%;
float:left;
text-align:center;
}
#big li a{
display:inline-block;
}
Makes the li element 1/4th of the width of its parent ul, then centers each a element in those. Add your styles as you want it to look.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Despite of many efforts, I am unable to make the drop down menu of the same width as of the parent. Please help me out. Fiddle here
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 958px;
/*margin: 60px auto;*/
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 11px 40px;
color: #999;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1000000;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #000000;
}
#menu ul li:first-child > a {
/*border-radius: 3px 3px 0 0;*/
padding: 11px 13px;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #000;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #000;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
/*border-radius: 0 0 3px 3px*/;
padding: 11px 20px;
}
HTML:
<ul id="menu">
<li>About </li>
<li>Programmes
<ul>
<li>Undergraduate</li>
<li>Postgraduate</li>
</ul>
</li>
<li>Academics</li>
<li>Research</li>
<li>Facilities</li>
<li></li>
</ul>
In the dropdown menu ul element add "right: 0" (or -1px in your case to take into account the borders):
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
right: -1px /* <-- add this */
z-index: 1000000;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
transition: all .2s ease-in-out;
}
Then remove the width property in the a element:
#menu ul a {
padding: 10px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
This will work independently of the menu container width.
working fiddle http://jsfiddle.net/chopsticks/XLxJk/4/
#menu ul a {
padding: 10px;
width: 150px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul li:first-child > a {
padding: 11px 20px;
}
DEMO
So by positioning your dropdown menu absolutely you are removing it from the flow. This causes it to no longer size to the width of it's parent element. You'll need to explicitly set the width, set the width explicitly via js (if you want the menu items to size based on the text they contain) or figure out how to position it differently so it inherits the width.
How about this ?
Just set the width to 100% in the #menu ul, and you have a dropdown of the same size.
http://jsfiddle.net/XLxJk/3/
UPDATE: Okay I changed the margin on #access ul although now when I hover over it looks like this: http://imgur.com/NeUzN
Also is it possible to change the spacing between the page titles (sorry still learning css!)
I'm currently designing my wordpress theme and wondering how I could move the text up a bit to center up with the nav bar: http://i.imgur.com/BExiy.png
I'm using custom font as well. Here is my css:
#access {
background: #252525;
display: block;
float: left;
margin: 0 auto;
height: 40px;
}
#access ul {
list-style: none;
margin: -8px -13px -10px -13px;
padding-left: 0;
color:#000;
text-shadow:1px 1px 1px rgba(14,14,14,0.8);
text-transform:uppercase;
font: 24px Giantypo, Arial, Helvetica, sans-serif;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2.5em;
padding: 0 1em;
text-decoration: none;
color:#f3f3f3;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #3e5d8c;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #3e5d8c;
}
#access ul ul a:hover {
background: #3e5d8c;
}
#access ul li:hover > ul {
display: block;
}
}
Any help would be great!
Cheers,
Scott
Top margin of unordered list must be negatie value. For example:
margin: -7px 0 0 0;
Set the line-height to be equal to its height. On #access a, I believe, but I cannot know for sure without seeing the HTML. And I cannot know its height without seeing all of it live.
This is the CSS for the dropdown menu I create, the problem is that the menu disappears as soon as I hover the children items.
It gets fixed If I set Height:30px and line-height: 30px but I do not want to adjust height. I want it to auto adjust. I can't get it to work in IE7. This is my CSS
#menu {
display: block;
width: 1000px;
height: 30px;
background: url(../images/modern/menu.png) no-repeat;
margin: 10px 0 0 0;
position: relative;
z-index: 10;
}
#menu ul {
float: left;
margin: 0 0 0 5px;
display: inline;
width: 795px;
}
#menu ul li {
position: relative;
float: left;
display: block;
position: relative;
}
#menu ul li a {
float: left;
display: block;
color: #fff;
font-weight: bold;
padding: 9px 10px 9px 10px;
background: url(../images/modern/menu_l.png) no-repeat right;
}
/* sub menu style */
#menu ul ul {
padding:0;margin:0;border:none;
float: none;
display: none;
position: absolute;
z-index: 10;
width: 190px;
top: 29px;
left: 0;
}
#menu ul ul ul {
top: 0;
left: 190px;
}
#menu ul ul li {
float: none;
display: block;
position: relative;
}
#menu ul ul li a {
padding:0;margin:0;border:none;
float: none;
display: block;
font-weight: bold;
position: static;
background: none;
color: #fff;
padding: 6px 10px 6px 10px;
background: #333;
border-bottom: 1px solid #444;
}
This fixes it but I really do not want to set height for child item:
#menu ul ul li a {
padding:0;margin:0;border:none;
float: none;
display: block;
font-weight: bold;
position: static;
background: none;
color: #fff;
padding: 6px 10px 6px 10px;
background: #333;
border-bottom: 1px solid #444;
height: 30px;
line-height: 30px;
}
Try zoom:1; to the thing you applied height:30px; to.