I've a problem with my Dropdown menu. When you hover it, it will push the Footer away, and it will create a freaky effect that you can scroll the whole page. (This is only when the dropdown reach the footer)
I have tried lots of things like max-height etc, but it wont work.
Website:
{fixed}
If you hover the 'Zippo' menu item, the freaky things will come.
How can i fix this?
Thanks!
Wouter0100
You can set your dropdown menu position as absolute :
#nav li ul {
margin: 0px;
padding: 0px;
display: none;
position: absolute;
top: 25px;
z-index: 99; /* edited */
}
Change the following class from :
#nav li ul {
margin: 0px;
padding: 0px;
display: none;
}
to
#nav li ul {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 24px;
z-index: 100;
}
Footer drop down because of the height of the menu nav height
to over come this you need to pull menu out of the normal Dom by position it
#menu {position: relative;}
#nav {z-index: 100;position: absolute; }
Related
I am trying to me a Bootstrap dropdown menu to be fullscreen when open.
I have managed to do that with several ways, but when I move the mouse out of the menu to close it, a smaller menu appears behind my full-width.
Can you spot where is that and remove it?
https://www.suug.co.uk/sustainabilityhub/
Fullscreen code:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display: table;
border-radius: 0px;
width: 100%;
left: 0;
right: 0;
}
This looks to work perfect, but i dont want to have to top:77px
.dropdown-menu {
position: fixed;
top: 77px; /*height of main menu*/
width: 100%
}
I would to add Jquery Mega Menu to top menu with search box.
I was able to add the menu to top but the search box is not showing correctly.
please see Demo2.sarwana.co.uk
I added following css but still cant get it to show in my menu correctly.
.woocommerce-product-search {
display: none;
}
.woocommerce-product-search {
display: block;
float: right;
position: relative;
margin-top: -40px;
}
https://drive.google.com/file/d/0B8gFW78WkjMSeVFBVnA1NFBmX3c/view?usp=sharing
#dc_jqmegamenu_widget-2-item ul li a {
background-position-y: top !important;
}
Check the backgrounds positions. This rule fix it
#dc_jqmegamenu_widget-2-item ul li a {
background-position-y: top !important;
height: 1em;
}
#dc_jqmegamenu_widget-2-item ul li form {
margin-top: auto;
height: 1em;
}
I need to center the items on a list of my social-media menu (the 4 icons under the title on the sidebar).
I got to made them distribute evenly (each item width is 25% since I have 4), the "ul" is displayed as table.
However, the icons inside each "li" stick to the left ! Any ideas ? THANKS !
http://www.blogderod.com/
.social-navigation {
margin: 0 15% 10%;
display: table;
width: 70%;
}
.social-navigation li {
display: inline-block;
text-align: center;
float: none;
width: 25%;
}
Add the following to your CSS:
.social-navigation a,
.social-navigation a:before {
width: 100%;
}
This makes both the link and the social icon take up the full width of the li, allowing them both to centre correctly.
Add "text-align: center;" on the LIs and make the links inside the LIs "display: inline-block;".
Edit this class like this:
.social-navigation a:before {
content: "\f415";
font-size: 24px;
position: absolute;
top: 0;
left: 20px;
Change top/left position as you wish.
Make this changes in your CSS
media="all"
.social-navigation a:before {
content: "\f415";
font-size: 24px;
/* position: absolute; */
/* top: 0; */
/* left: 0; */
}
Hope that helps
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.
I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
However, this is clearly not ideal, as the menu needs to be dynamic...
Is there a way to achieve what I want via CSS? I hope so!
I am using the Superfish menu that comes with Theme Hybrid for Wordpress.
Thanks in advance for any help you can offer!
I get your point .. let's see again.
This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.
However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}