I'm trying to make my footer menu open upwards, but the menu is getting cut off at the top of the footer. I've tried setting overflow-y:visible;, but that doesn't help.
Here's the site: http://new.freshsourdoughexpress.com/contact/
And the code I'm using:
#colophon {
padding-top: 40px;
overflow-y: visible;
}
#colophon #navbar ul li:hover ul {
bottom:100%;
top:auto;
}
#colophon #navbar ul ul li:hover ul {
bottom:0;
}
(The top padding is temporary, just to see what's happening.)
I've been following the 3rd how-to in this guide: http://premium.wpmudev.org/blog/move-wordpress-theme-menus/
How do I get the menu to extend out of the footer?
Within your CSS, you'll need to add a couple of attributes to the id below.
#colophon {
padding-top: 40px;
overflow: visible;
display: inline-block;
width: 100%;
}
I've tried it out using the CSS editor within Chrome and everything seems to work.
Related
So i am working on a small HP for a school project and am kinda stuck with the nav bar. When i hover over "Gallery" the submenu opens and there's the problem:
I am trying and trying but can't seem to find a way to get the backgroundcolor only for the submenu area and not the whole page on the left of it...
I'm sure it's an easy fix but I am struggling atm
here's the jsfiddle:
https://jsfiddle.net/67wq84g9
i think it's something here, but if I change the width and hover over the submenu it doesn't completely change color.
.menu ul {
display: none;
width: 100%;
}
any ideas?
can you set width for
.menu ul {
list-style: none;
background: #7ebc71;
padding: 0;
position: absolute;
top: 100%;
width:80px;
}
and
.menu ul li a:hover {
background: #557F4C;
width :80px;
}
I get the feeling that these are really simple problems, however I'm new to coding and can't work out how to fix them. Any help would be greatly appreciated.
Firstly, the hyperlink text is currently the only clickable part of the dropdown menu. I want to be able to click the whole section of the menu that the text sits in, i.e the individual parts separated by the 1px borders. I'd also like these sections to change color when the cursor hovers over them, but I'm not sure which part of the css to change if I want to achieve this.
Secondly, the padding creating the space between my main menu links is being included in the link hover function. Is there a way of spacing out the links that doesn't cause the subpages to drop down when I hover over the white space to the left of them? (This seems like the opposite of my first problem)
Finally, part of the css I've written makes any of the parent menu links that have been clicked stay highlighted purple while the viewer is on that page. This was intentional, however now that I have child pages in the dropdown menu, they all stay that color too when the parent page is clicked. Is there a way of fixing this? it would be ideal if both the parent link and the specific child link stayed highlighted purple whilst the viewer was on a that particular child page.
The website link is www.lucieaverill.co.uk
Here is the code :
HTML:
<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>
CSS:
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding-left:50px;
padding-bottom:20px;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
UPDATE! ------------------------------
I think I've made some progress based on what various people have been saying about a tags. I've managed to reach the point where the hover effect changes the a tag's color, however the padding is a little off, and I can't work out why. I've tried setting the padding-right value to "auto", as I don't think it can have a specific value as each link varies in length.
Obviously, I want the padding to extend to the very end of the menu at the right hand side, but I can't make this work.
There also seems to be some odd spacing between the color of each link, and at the very bottom of the menu.
I'm surprised to see that the transition between colors is smooth and gradual.. I don't think I have any css that tells it to act like this.. is there a way of making it more instant?
The web link again, is www.lucieaverill.co.uk
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
margin-left:0px;
float:none;
}
.header ul li ul li a {
background-color:#FF3F55;
padding-left:10px;
padding-right:auto;
padding-top: 12px;
padding-bottom: 12px;
font-size:11px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li:hover a {
background-color:#ededed; }
/* end dropdown menu */
See the fiddle:
Remove the padding of li and add the required padding to a tag.
the clickable problem will be fixed.
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding:0px;
}
.header nav ul li a{
padding:20px 25px;
}
.header nav ul li a:hover {
color:white;
background:black;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
<div class="header">
<nav class="site-nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>submenu
<ul>
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</nav>
</div>
Having a problem with my navigation bar. When it drops down it seems to keep pushing my classes named .banner-left and .banner-right.
ill put my code on JSfiddle as i'm doing this for a project and have to use Harvard referencing so sources back to here increase the plagiarism percentage even if the work isn't leached elsewhere.
Link: http://jsfiddle.net/wuqa5y87
You should set your dropdown's position to absolute.
UPDATED FIDDLE
nav ul ul {
display:none;
position: absolute; }
Can you try adding position:absolute to nav ul li:hover > ul
nav ul li:hover > ul {
display:block;
position:absolute;
}
Here's a link to an updated fiddle: looks like your original (missing rounded edges on last - but you can figure out how to get those back I am sure)
http://jsfiddle.net/wuqa5y87/2/
nav ul ul {
position: absolute;
}
nav ul ul li{
position: relative;
clear: both;
}
As the other folks said, you need absolute positioning on the UL element that is shown because that takes it out of the normal flow of the document.
I've updated your fiddle here
http://jsfiddle.net/ryanore/wuqa5y87/3/
You'll also need a little extra massaging to get it right
nav ul {
text-align:center;
margin:auto;
position: absolute;
}
nav ul li ul{
width: 175px;
}
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.