I haven't seen instructions for this anywhere - but I managed to put regular dropdown and mega menu in the same navbar. However, if the drop down menus are on the right side of the megamenu, it doesn't work (the dropdown menu items are not visible), But if the dropdown menus are on the left of the megamenu button, then everything works.
Anyone know a solution for this?
Related
I am creating a navbar with dropdown menus for both desktop and mobile users. On desktop, the dropdown menus are displayed when the user hovers over the top-level elements and disappear when they mouse away from it. This is the expected behavior. However, on mobile, when I open the navbar and try to focus on each top-level menu item to reveal the dropdown content inside, I am running into an issue.
When I try to jump, for example, from the first dropdown to the 3rd dropdown, my tap appears to be in the correct place, but the instantaneous collapse back to hidden must happen before the next tap is registered. This leads to all of the menus collapsing back down. I have noticed that if I start at the lowest dropdown option and work my way upward, the issue does not occur because I am tapping on coordinates that are not reflowed when the content changes. I am looking for a solution that allows me to jump between any two navbar items, no matter the order or length of dropdown options without having the menu collapse down completely.
This is a link to what I'm working with. Content reflows to mobile layout at about 750px viewport.
LINK TO EXAMPLE
I have tried adding a delay to the transition property but it did not prevent the jumping of elements in my CSS dropdown menu when jumping between items in mobile navigation. I was expecting a solution that would prevent the jumping of elements and allow for smooth navigation between items in the mobile navbar.
I am trying to use the use Parent Menu Item As Toggle For Submenu using the code mentioned here. Doesn't seem to work for me. Any help?
Code for mobile menu
I added a media query at 1180px wide for horizontal viewing on tablets so that the navigation menu items don't wrap to a 2nd line, but instead displays the toggle button. However when clicking the toggle where it displays the main menu, that menu has several dropdown sub-menus. At this width, when clicking on a menu item to see a sub-menu,those choices are displaying over toward the far right instead of immediately under the main menu choice - See the image. Yet it acts just fine under 767px wide. Since I am not sure how menu items get aligned to begin with when showing the mobile menu, I am not sure what is causing this or how to correct it. Thanks in advance.
I'm using meteor + bootstrap.
My nav is at the bottom of the page and the logginButtons are in the navbar.
The dropdown drops down, below the end of the page.
Is there a way to make it drop up, on top of the navbar ?
The pattern is my background, under firefox's window.
The Bootstrap document states it clearly that
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
You will see a working example if you follow the link.
Please see the menu image bellow
i'm using bootstrap navigation menu here .when if its items are few its child pop up menu goes as this .i'm tried a lot but not found a good result ,this menu items generated by dynamically from asp.net
help me to solve this .