I am creating a sidebar for an application, I would like it to have the same functionality as the WordPress dashboard menu, for example:
Fixed left - shows full sidebar on desktop view (Icons and label).
Tablet view, only icons display.
Mobile view no sidebar, burger menu displays top left, once clicked the full sidebar shows down the left side of the screen.
I have been searching for examples so I do not have to 'reinvent the wheel' however only example I have found contain a portion of the functionality I require. So I thought I would ask if anyone knows of an example that may help further. If not I will re-create re-using the examples I have found.
Thanks,
Related
I've looked all over, but I can't find the exact solution to what I want to do. I'm new to coding so it's likely a simple solution that I'm just not seeing.
I want to create a sidebar nav that is fixed on desktop and tablets, but collapses into a hamburger menu that is fixed to the top on mobile using Bootstrap 4. A lot of the examples I found used the now outdated affix property. The other examples were collapsible, but I want the sidebar to always be open on desktop and tablet. I attached photos of how I designed it on desktop and mobile for further reference.
I know you are asking about bootstrap, but since you anyway use external library for such thing, maybe this small script would be a solution for you. It does exactly what you need: https://github.com/grzegorzgit/Litomobile
If your menu is based on ul and li, this script automaticaly creates animated mobile menu and icon for the window size you want.
I have a bit of a confusing issue. I'm building a website with bootstrap, and I have a bootstrap navbar that (when the page is shrunk down to mobile) shrinks the menu down to one box that drops down the menu options when you click it. The issue is that the navbar menu drops down only on the home page. I copy-pasted the html code for the navbar for the other pages, but still the mobile drop-down only works on the main page. Any thoughts on why this could be happening?
Do you have your vendor Javascript and Bootstrap Javascript linked on the other pages as well? It sounds like you have linked the Javascript files on your homepage but forgot to add it to the other pages.
It would help a lot to see your code.
I am trying to use Twitter bootstrap's sidenav, as seen in their "Getting started" guide on the left hand side. I have managed to use their page as an example and build my own sidebar. However, I noticed that on both my sidebar and theirs, the links to anchors do not work properly. It scrolls to the point below the anchor by maybe 40 pixels. This cuts off the top of the header.
For example, go to the "Getting started" guide and on the side navbar, click on "Additional downloads." It scrolls past the header and cuts off the top part of the section.
Does this happen for anyone else? It happens in my IE, Chrome, and Firefox running on a Windows machine. I can't seem to find the cause of this to fix my own side navbar.
Currently working on my first website for a local business and I'm having an issue with the navbar when viewed on movile devices. If the device is unable to display the entire navbar when you scroll to the right it shows an empty space. I'm not sure what is causing the issue, could someone please point me in the right direction?
Here's the site URL - www.riksystems.com/index.html
Thanks.
It looks like you have a fixed layout and not a responsive one. Check directly from the getbootstrap how to create a responsive layout and check the code for a responsive navbar so when it is viewed on smaller resolutions the menu will colapse and show a button that you can click on to see the full menu.
Click here.
and scroll down for the responsive navbar.
I'm trying to develop an horizontal scrolling for a landing page. I'm trying information that I found here. But I want to make something similar, but not exactly that...
In that Web page, we have two elements:
We can see we have a menu, and an horizontal list of boxes. This list works as expected: if you press on a link on the menu, it jumps to the correct box. If you go to a mobile browser, it scrolls right and left using your hand.
But, when you scroll right with the mobile browser, the menu on the top, stays at the left of the layer, disapearing from the visible part of the Web. If you do so with a computer browser, the menu stays always at top left.
I want the menu to always stay at top, even if I'm using a mobile browser, so I can scroll, let's say, some images, without hiding left the content of my Web Page.
How can I do so?
I hope I explained myself correctly.
If you also think there's an easier way to make a scroll horizontal, I'm open to suggestions.
PS: I want a kind of result like this:
Mobile browsers have issues with fixed positioning - see this article which also provides a list of JavaScript Solutions.