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.
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'm trying to build a scrolling navbar in my Angular 7 app.
The functionality should be like this:
When the user clicks on any of the navbar links, the page will scroll smoothly to that section (with that specific ID), and the navbar link should have an active class.
Also when the user scrolls to that section the menu link should also be updated with the active class (based on the OffsetY for example)
something like this:
Scrolling Nav
You could use the scrollTo window function to get the wanted behavior:
scrollTo
About the perfect approach, to get the exact pixels I am not sure.
I have a website using the fantastic fullPageJS plugin, and it does what it does very, very well.
I have however, an issue on mobile devices, where the sliding hamburger menu does not scroll with touch controls when the menu height exceeds that of the ViewPort, as in this picture:
Question
How do I force the side menu to accept touch-based scrolling?
You should make use of the fullpage.js option called normalScrollElements.
As detailed in fullpage.js docs:
normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the Javascript selectors for those elements. (For example: normalScrollElements: '#element1, .element2'). This option should not be applied to any section/slide element itself.
Additionally, you can call fullpage_api.setAllowScrolling(false) when opening the modal. That will prevent fullpage.js to scroll up or down when using the mousewheel or trackpad.
You can set it back to the default value when closing the menu by using fullpage_api.setAllowScrolling(true).
You should try to add overflow: scroll if you haven't already.
I am using a WP theme(bootstrap). When resize my window to mobile view, i see a button of toggle menu (3 horizontal lines). On clicking it, i see a drop down type list of pages.
I want to change that drop down to open like right to left.
Just like this : Here is the link
How to change the dropping style from [top To Bottom] to [Right To Left]?
I think you might need to look at Bootstrap's 'off-canvas' menu. Unfortunately it's not just a simple change from top to bottom to right and left but it's quite straight forward to achieve using this demo example.
https://getbootstrap.com/examples/offcanvas/
Using a blank Wordpress theme to create a custom site, but it did not have any CSS for a drop down submenu. I have it basically working but when I try to move the cursor to the second drop down item down under the (events tab) the sub menu disappears.
site is here
I thought I have it all set to display block so that the whole menu item is the button, but not the case here.
You need to set the z-index of the drop down menu higher than the image. By default elements have a z-index of 1, so anything greater than 1 will do (unless you've specified otherwise)