Multiple menu's in responsive hamburger menu - responsive-design

I am working on a website with drupal using bootstrap. I have different menu's on the desktop version: top bar menu, main navigation, sub navigation. They are in different locations.
When on mobile, I would like to show all those menus in 1 hamburger menu with collapsible links. What would be the best way to do that ?
I could create all the menus twice on the page, and then show/hide the menu depending on the viewport ... or is there a better way ?

Related

React custom responsiveness and position of modal dialogue on page load

Currently working on a React project, with styled-components. I am trying to make my modal responsive. Like when the page loads, the modal should be fixed just below the "add event" button.
Sadly, it is but when I change screen size, it does NOT move with that button or the page, and remains at that fixed position for different screens, like a normal modal does
Click to view Image
I have tried changing the margins and position, still no difference. The Modal remains as a fixed overlay and is not responsive with the page components.

How to collapse React Bootstrap mobile Navbar when tapping anywhere?

I would like to collapse the mobile react bootstrap navbar when tapping anywhere on the screen. I know collapseOnSelect exists to make the mobile navbar collapse when an item is selected, but I'd also like to achieve the same thing when the user taps anywhere on the screen. Not sure if its possible, I can't find anything in the documentation.
Thanks!

AppGyver steroids app - How to add scrolling to a Drawer

I implemented a drawer in my steroids application with similar styles as google+ drawer. However, I have several links on it, and when my device is in landscape mode I'm unable to see all the links, and I can't scroll the drawer.
I want to be able to scroll the drawer vertically as a normal webview, just like google+ drawer does.
Is that possible?
Can I embed a webview inside another?
I managed to fix this by adding heigh=device-height to the content meta tag. And I added overflow-x=hidden to just allow vertical scrolling.

Showing the correct menu a page belongs

I have a Drupal website with 3 menus (a top menu, a main menu and a footer menu), and any content I publish belongs to one of those 3. My clients wants me to show the correct menu as an accordion on the sidebar, as a navigational support. I've looked all over drupal modules and can't find anything similar. Any thoughts?
I found it. it's called Menu Block

Side bar navigation that shows in desktop and pushes on mobile

I have been trying to create a vertical left sidebar navigation that shows when the window size is desktop size and collapses when the users resizes the window, shows the hamburger icon, and when the user clicks the icon it pushes the navigation out.
Trying to find a solution everywhere. It is for a admin dashboard I am building. Please help.
Thank you in advance.

Resources