I am working on a project and I am assigned to show a drop-down menu for the website , I mean Drop down menu but I dont know what am I doing wrong here. Can anyone help me out ?
enter image description here
I think the issue is with overflow hidden for this div ".content, .container. "
removing this will show the full dropdown but make sure this won't make any other issues for your website.
Related
I don't know if this is possible, or if it is, then I'm very dumb.
So I'm using bootstrap 4 to make my wordpress theme. I would like to make the menu to never expand so it always showing the hamburger icon. Now, when the user click it, I'd like it to filled the entire screen like in this website www.tomango.co.uk.
I tried setting the width to 100%, nothing happens. Changing it to a set px also change the toggle button icon.
If you know how to do this, please help me.
This is what you need, please follow this...Just click on slide down, same as your requirement
https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
I have tried to post code here recently, but it is working for some code posted only. So I would like to see my site dropdown not show. In this site, the drop-down Services can't display its sub-menu. Please take a look at my site and guide me how to fix the dropdown menu?
I tried to set z-index with various value but it's not working.
You need to remove overflow: hidden; from .navbar-default. The submenu ul is overflowing the div.navbar-default, but you are hiding it.
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
I'm having what I believe to be a simple problem but I'm not sure how to fix it.
Basically, while hovering over links on the menu, the drop-down menus "go behind" the other elements on my page. I've tried implementing float css but it doesn't seem to work.
If you visit my site just for a second and hover on the navigation menu you'll see what I mean.
How do you fix something like this?
Will appreciate any help.
Thanks.
In your css, set your z-index to a really big number like 9005, so it's above everything else on the page.
Like: z-index: 9005;
add z-index:9999; to the #page-bar css
it solves the problem (tested in chrome)
I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin