Sub menu items not visible on hover - css

I created a sticky fixed footer on my site. Finally got it to be sort of what I need, however my sub menu items are not visible when you hover over the parent menu item. They are definitely there you can see the bottom item but the ones that go above the footer aren't visible.
You can see the page here: http://feltzdesignbuild.com/fdb-tester/
Can anyone help me get the sub-menu items to show on top of the content?

I found the answer myself, had to remove the overflow: auto; from the CSS.

Related

Sliding mobile nav overflow

I'm working on a mobile navigation option for my site and want it to slide from the right.
Here's a mockup:
https://codepen.io/rctneil/pen/OqzBjX
The issue I have is that by default the page scrolls over to the right when the nav is hidden.
I've tried adding overflow: hidden to .mega-wrapper which stops this scroll, but also hides the navigation when the toggle button is clicked.
Any ideas?
Kind regards,
Neil
I think that adding overflow: hidden was a good step. But after that you need to positioned absolute the mega-wrapper__mobile-nav and translateX the mega-wrapper__wrapper and mega-wrapper__mobile-nav
I made a demo

Fixed menu not working inside pusher

In my code I have a sticky menu to be fixed like a sidebar. I want to have the menu like semantic-ui website.
But, the fixed property only works outside .pusher element. Just like the top fixed menu, in my example.
JSFiddle example
How can I fix that?
Thanks!

Dropdown menu (display:none) blocks clicking other divs that are positioned in it's space while it's not in use - can I click through?

I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie "underneath" the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to "click through" these dropdown divs?
I know that there is "pointer-events:none" But this would seem to disable all clicking on the dropdown menu, which I cannot have.
I've seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don't block divs that are positioned "underneath" so what's the solution here?
Is it something I need to fix with the positioning of my dropdown menus?
Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren't clickable! Then I did "clear:both" and it moved down and finally realized the hidden divs were in the way.
It seems like you're using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.
You should be hiding them differently, with either of the following:
Use visibility: hidden or display: none (if you want to also hide it from screen readers)
Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
This will ascertain that they're still readable by screen readers.
Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.

CSS | Shopping cart with variable height inside fixed div

http://tinyurl.com/cc4qkee
You can see a cart in the right top corner.If menu isn't fixed it works fine, but if it's fixed and you put a lot of products in the cart you cant scroll down to see the rest of the cart.
I don't know javascript well, but I used a javascript method in another project http://tinyurl.com/bljpxm4 and the cart still doesn't work properly.
Any ideas on how to get the cart working properly and have fixed menu ? :)
Can you change the style of your cart popup? Maybe just make it a summary of number of items, total, etc. You could also try removing the images, and that would give you a lot more space.
Another idea would be modify your mouseover and mouseout jquery functions to change the style of the #top element to remove the fixed position when you are showing the menu. You would also have to remove the 30px padding from #header. This might get a little tricky. You would probably have to use position: absolute, get the current scroll bar position, set top to that, and monitor the scroll bar position to move #top up in case someone scrolls up. On mouseout, you would set everything back to how it was.
A third idea would be to set the height of the cart drop down, and use overflow:auto to give you scroll bars in the cart area.

Full width submenu with aligned submenu items

I'm having a problem trying to achieve a navigation design I made.
Please see this link to have a look at the example http://lab.518studio.com/submenu
So as you will see I'm trying to have a full width submenu background, I used the position:absolute; but it presents me two new problems:
I cant get the sub-items aligned with the main item.
Content below it will not move down when it displays.
Basically what I want to do is to get the position of parent items under the correspondent main item and have the content below it moving when submenu is displayed.
I placed a link on the URL to download the HTML and CSS files.
Make the menu li position:relative and give submenu ul a width

Resources