[ad_1]
https://i.ytimg.com/vi/3PjNwqlJvjc/hqdefault.jpg
In this video tutorial, I am going to discuss Bootstrap 4 submenu. We can easily create bootstrap 4 sidebar nav by using some custom CSS. Where I create three layers of the submenu in this sidebar. By using collapse session and toggle function of bootstrap 4 I designed this sidebar or sidenav.
Link for download the code: https://drive.google.com/drive/folders/1eC8T6gW52pOc-t-osc6hZlufdFfYerVE?usp=sharing
Tags:
bootstrap 4 sidebar collapse
bootstrap 4 sidebar nav
bootstrap 4 sidebar template
bootstrap 4 sidebar responsive
bootstrap 4 sidebar tutorial
bootstrap 4 sidebar menu responsive
bootstrap 4 sidebar menu toggle
bootstrap 4 sidebar dropdown
bootstrap 4 sidebar and navbar
bootstrap 4 sidebar nav collapse
bootstrap 4 sidebar navigation
bootstrap 4 sidebar layout
bootstrap 4 sidebar menu
Original source
19 responses to “Bootstrap 4 sidebar menu with submenu responsive with code 2018”
Hello this is not a complete tutorial . wasted forty minutes going through the video only to find its incomplete. very disapointing
can you send me the source code ?
Fix broken code:
in 'sidenav.html' (from dl g-drive link), line 6 is pointing to 'sidebar.css', but there is only 'sidenav.css' => replace with 'sidenav.css'. You should be good to go (to sleep, if you are trying this code late in the night). Refresh the browser.
It works for me, except FontAwesome icons.
Ok, to make icons work, one should not use [03:00] font-awesome.min.css, but instead use …all.css:
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
Have fun, Simon. And please do not vote 'thumbsUp' if the code does not work, nor the author has provided the fix. Anyway, thx for sharing.
I really liked what you have created I am really not getting the CSS file that should affecting the html code. Secondly something is amiss. It works but the background does not seem to work. A little dissappointed.
I can't see where you specified the hamburger icon on your html
Hello Good morning, I downloaded the google drive, when I went to open it was the page unconfigured, is missing bootstrap4.css and sidebar.css, you could add this 2 files in the google drive link
Your code doesn't work from the link. Have a downvote!
Bro…….your code doesn't work. Check before upload
Hi sir 🙂 How to make the sidebar fixed? Thanks
Good Tutorial. Code not working FIXED. Following changes are required. Delete line number 5,6,7. and paste following link.
<link rel="stylesheet" href="sidenav.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
thank you for your effort. please make a video on web whatsapp and just ui version
Thanks! what a good work! pls, keep it up.
You have an error in your naming structure in the downloadable files. sidenav.html is calling for css/sidebar.css, but the file is actually named sidenav.css, which needs to go into a folder call "css" as well. Other than that, it's a very good tutorial 🙂
your link to source code is not complete.
Link for download the code: https://drive.google.com/drive/folder…
the above link has only 2 files
1. sidenav.css
2. sidenav.html
provide the rest of the files which are required for the above demo.
wonderful work.
Just one question, how to make the sidebar with fixed position when i scroll down.
Hi! how to show the menu by default?
thank you!
Hi, first of all thank you for your work. I have to say that your code from the link it's not the same with the code from the video so it's not working properly. Maybe you have time to check this in order to have a correct code for those who want to learn.
Thank you sir
Sir need responsive slideshow using bootstrap and css. Reply soon as possible