Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
Related
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 trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
I have a navbar with a user dropdown menu aligned right. When the user has a picture added, I would like to show a small thumbnail next to the users name. This is already done, however I think it is implemented in a flawed way.
When the viewport size shrinks, the image (as it is now) is put on the collapsed list of menu items at the bottom - which shouldn't happen. It should either disappear or stay with the users name.
Also I would like to have the picture clickable and 'grouped' with the user name.
I have made a test navbar of my code here:
https://nkhs.dk/navbar/navbar.html
Can you suggest a change to make this happen?
Regards, Niels.
It should either disappear or stay with the users name.
To disappear it use the .hidden-* class.
e.g if you want to disappear this image on widths <768px, you would use class .hidden-xs.
For more: http://getbootstrap.com/css/#responsive-utilities-classes
Alright, I have some questions...
When you have a moment, can you take a look at http://www.crystalcoach.com/new
I'm having some trouble with the hover menu. Okay, I know it's probably a super out of date code... But it works, haha.
What I'm having difficulty with (and see image for examples) is when you hover over the menu, the positioning is wrong. If you go to the URL above and hover over a menu, you'll see what I mean.
In addition, where in the code can I change it so the menus are wider? If you hover over "Fleet", you'll see that the menu itself is not wide enough to encompass all of the vehicles in there. I had to abbreviate a few but the hover portion isn't fully working.
Thanks so much for your help.
Here's the image: http://i1166.photobucket.com/albums/q617/stevezee87/menusample.jpg
Well, its old alright, messy too, but here's what you need to change:
1)
There is a div being presented with the sub-menu options. That div contains a width of 150px, loose that declaration and the sub-menu will grow according to its contents!
The mentioned div is right after the <a></a> with the menu text:
2)
The span.qmritem needs to have a top value just about 10px by my tests, to keep in line regarding the non-hovered menu options.
3)
The div mentioned at point 1), must get those same 10px increase on the existent top value:
Link to both images in full size:
Screen-shot for Problem 01
Screen-shot for Problem 02/03
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