Hi,
I have a small problem with my website (www.mtrprotec.com) where the drop down menu doesn’t go over the slideshow. (You will have to decrease the width of the browser to go into mobile mode).
I have tried getting rid of the .rectangle, but it somehow needs that for the drop down to display, and when it was assigned a smaller height than the drop down box it didn’t work.
Thanks for any help!
The following changes to your CSS should help:
.navigationbar { background-color: #202020; padding: 1rem; position: relative; z-index: 3000;}
.rectangle { margin: 0; width: 100%;}
.drawer { background: #303030 none repeat scroll 0 0; float: right; height: 220px; position: relative; transition: all 0.9s ease-in-out 0s; width: 160px; z-index: 1000;}
Hi, I used this code but it just put the slideshow to the left of the drop down menu, and the drop down menu is permanently open.
Sorry about that. I am just looking at what I missed
Okay try the following changes:
.drawer { background: #303030 none repeat scroll 0 0; float: right; height: 220px; margin-top: -320px; position: relative; transition: all 0.9s ease-in-out 0s; width: 160px; z-index: 1000;}
.slick-slider { -moz-user-select: none; box-sizing: border-box; display: block; position: relative; z-index: 1;}
.slick-list { display: block; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 1;}
Doesn’t seem to work, it displays the slideshow underneath the drawer, and the draw is permenantly open with nothing inside it.
That’s interesting as that is not what I am seeing at my end. I will place this on a Codepen shortly
I will put it on the website, if that helps. I may have been stupid somewhere…
The .drawer needs the margin-top:-320px added to it. This makes the menu fade. I am lust looking at the menu items now
I did that and changed a few things, and its partially working now (with a lot of errors, such as text being cut off and not being the right height), but the idea is there.
That is better. I have made some further changes, and it is now working, but could do with some improvements.
Rather than give you all of the CSS I thought I would list just what has changed.
I have added the following class to the CSS.
.mobile-headers {height:100%}
To the .drawer li I changed text-align from right to left
To the ,drawer li a I removed the height:220px
This is usually something that’s easy to fix, but I don’t see any dropdown on that site. 
Seems to work fine, the .mobile-headers {height:100%} wasn’t needed either. I think I will change the style a bit and make the drop down the full width, as this pushes the slider down.
Thank you for your time 
Have you reduced the width of the browser? I am using media queries, so the drop down is only there on mobiles/tablets.
O, right. Hm, it’s pretty broken in that view right now. Normally, the dropdown needs somthing like absolute positioning, with z-indexes thrown in, to avoid pushing things down and being hidden. But there’s preliminarly work to do first.
It seems fine to me?
Edit:
Sorry, I completely forgot to change the online version and I was viewing it locally 
Now the drop down menus seem to be working fine, but in the desktop view the logo/headers break down and go onto multiple lines before the tablet zone is reached. I tried fixing it by using percentages, so they would decrease the space between the logo/heading but it doesn’t work.
The image has a margin-right: 300px, which is causing some of the issue you are seeing
It looks as if you haven’t quite got your media queries sorted out, as it’s a bit mixed.
Before going any further, you might want to validate your HTML and sort out the errors - especially the missing doctype. It always pays to eliminate errors in your code first, before trying to sort out other problems. Sometimes fixing the code is all it takes.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
