So basically I need to produce a menu like this in Wordpress:
Where the red bar is the width of the page and not fixed so can shrink with resize.
And the submenu is centred
I currently have:
And the CSS is:
#access {
clear: both;
display: block;
margin: 0 auto -10px;
width: 100%;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
margin-top: 0.3em;
padding-left: 0;
display:inline-block;
/*Font*/
letter-spacing:1px;
text-transform:uppercase;
color: #FFF;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 2.333em;
margin: 0 1.2125em;
margin-bottom: 0.5em;
padding-top: 0.5em;
text-decoration: none;
/* Same colour as background */
border-bottom: 1px solid #000;
}
#access ul ul {
display: none;
position: inherit;
top: 0; left: 0;
margin: 0 auto;
width: 100%;
z-index: 9999;
float: left;
}
#access ul ul a {
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
display: inline-block;
}
#access ul ul li {
display: inline-block;
}
Any help
Check this jsfiddle created for you
I had defined a new division sub-menu-bg after the menu code and given a red background to it. Also i had edited your CSS to achieve correct horizontal drop-down menu.
Hope this will solve your problem.
Related
I am having an issue with a sub menu. You can see at http://responsiveradio.radiobrandbuilders.com by hovering over the Home link.
The padding does not show up for the sub menu li a items but as soon as you hover over them the padding works.
I'm sure it is something simple I am overlooking but any help would be appreciated.
nav {
height: 60px;
}
nav ul {
list-style: none;
margin-top: 19px;
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
}
nav li:last-child {
margin-right: 0;
}
nav li a:hover {
color: #fff;
cursor: pointer;
}
.sub-menu {
display: none;
left: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.sub-menu li {
display: block;
margin: 0;
padding: 0;
}
.sub-menu li a {
color: #fff;
width: 100%;
}
.sub-menu li a:hover {
background: #fff;
color: #000;
}
Changes in your css to be made... A tag is inline tag ...so you have to make is display block.
nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
display: block; /*changes done */
}
nav ul {
list-style: none;
padding: 0;
margin-top: 0; /*changes done */
}
.sub-menu{
display: none;
left: 0;
padding: 0;
position: absolute;
top: 52px; /*changes done */
width: 200px;
}
in css
.sub-menu li{
padding:15px;
}
In your css you set padding:0px;
modify your style like
.sub-menu li a {
color: #fff;
width: 100%;
display: inline-block;
}
.sub-menu li a{padding:0}
add this style and refresh your page.
For my website (www.heretoedit.com) I want to move the text in my navbar so that the "about" button is lined up with the rest of my website's text but the "contact" button stays put. Plus I want to stop the text for the "extras" and "contact" buttons from moving down when the screen size gets reduced.
Below is my navbar code, any help would be much appreciated. Thanks.
#navbar {
background-color: #0299EB;
font-family: Verdana, Geneva, sans-serif;
color: white;
font-weight: bold;
position: absolute;
width: 1000px;
min-width: 100%;
height: 70px;
top: 150px;
left: 0px;
}
#navbar ul {
list-style:none;
display:inline-block;
margin-left: 130px;
margin-top: 25px;
}
#navbar li {
float:left;
padding: 0 9px;
text-align:center;
left: 0px;
}
#navbar a:link {
padding: 0 30px;
text-decoration: none;
color: #FFF;
}
#navbar a:hover {
color: black;
text-decoration: none;
}
#navbar a:visited {
color: #FFF;
padding: 0 20px;
text-decoration: none;
}
#navbar ul {
list-style: none;
display: inline-block;
/* Add these */
margin: 25px 0px;
padding: 0;
width: 100%;
text-align: center;
}
#navbar li {
/* float: left; // Remove this */
padding: 0 9px;
text-align: center;
left: 0px;
display: inline-block; /* Add this */
}
I'm using the twentyeleven theme for wordpress 3.4.2. The default theme menu shows a dropdown on hover. What I'd like to do is have the current menu item's submenu displayed. What I've achieved thus far is diplaying the submenu by setting the css property display:visible.
This link, http://www.gq.com shows an example of what I'm trying to achieve.
The related CSS styles are as follows:
#access {
clear: both;
display: block;
float: left;
margin: 0px auto 15px;
width: 100%;
height: 36px;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2.8em;
padding: 0 1.2125em;
}
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 2.9em;
left: 0;
width: 188px;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
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 ul li:hover>ul {
display: block;
}
Hi I had to create a horizontal submenu for a website using wordpress. I just have 1 more problem, when you scroll over the link when halfway down the page the submenu appears halfway down the page. I believe this to be because of:
position: fixed;
top: 264px;
left: 50%;
width: 1000px;
margin-left:-500px;
Is there a way to fix this?
The website is: http://dev.timson.me (Submenus on "Upcoming" & "Past Productions")
And the CSS is:
#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
padding-top: 8px;
width: 100%;
font-family: Stag;
display:block;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
padding-left: 0;
display:inline-block;
}
.sub-menu {
text-align: center;
}
#menu-default > li {
float: left;
position: relative;
}
.sub-menu > li {
display: inline-block;
}
#access a {
color: #eee;
display: block;
line-height: 25px;
margin-top: -4px;
margin-bottom: -4px;
padding: 0 1.2125em;
text-decoration: none;
}
#access ul ul {
display: none;
float: left;
margin-top: 0;
position: fixed;
top: 264px;
left: 50%;
width: 1000px;
z-index: 99999;
margin-left:-500px;
text-align:center;
padding-top:5px;
padding-bottom:10px;
background: red;
}
#access ul ul a {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-bottom:10px;
}
#access ul li:hover > ul {
display: block;
}
Any help is greatly appreciated.
Cheers,
Peter
Get rid of
position: fixed;
And that should do it.
I think you could clean up a lot of the css ultimately repairing your issue.
//Remove left margin
#access div {
position: relative;
width: 1000px;
}
ul, ol {
margin: 0;
}
//Remove left margin
#access ul {
display: inline-block;
font-size: 13px;
list-style: none outside none;
padding-left: 0;
}
//remove position relative, it is now located in the access div container.
#menu-default > li {
float:left
}
#access ul ul {
background: none repeat scroll 0 0 red;
display: none;
left: 0;
margin-top: 0;
padding-bottom: 10px;
padding-top: 5px;
position: absolute;
text-align: center;
top: 23px;
width: 1000px;
z-index: 99999;
}
You may need to adjust the vertical padding with the sub nav. Hope that helps.
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.