• Monday , 30 March 2020

Bootstrap 4 sidebar menu with submenu responsive with code 2018

Code Canyon
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

3d Ocean

Related Posts

19 Comments

  1. David Mclean
    December 31, 2018 at 13:17

    Hello this is not a complete tutorial . wasted forty minutes going through the video only to find its incomplete. very disapointing

  2. LAM PROD
    December 31, 2018 at 13:17

    can you send me the source code ?

  3. Simon Hren
    December 31, 2018 at 13:17

    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.

  4. Subhrajit Ghorai
    December 31, 2018 at 13:17

    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.

  5. Micheal Wade
    December 31, 2018 at 13:17

    I can't see where you specified the hamburger icon on your html

  6. Adilson dos Santos Luna
    December 31, 2018 at 13:17

    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

  7. A W
    December 31, 2018 at 13:17

    Your code doesn't work from the link. Have a downvote!

  8. Adarsh Kumar
    December 31, 2018 at 13:17

    Bro…….your code doesn't work. Check before upload

  9. Ron Feranil
    December 31, 2018 at 13:17

    Hi sir 🙂 How to make the sidebar fixed? Thanks

  10. Mayur Asalmol
    December 31, 2018 at 13:17

    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"&gt;
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&gt;
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script&gt;

  11. Deepak kumar pradhan
    December 31, 2018 at 13:17

    thank you for your effort. please make a video on web whatsapp and just ui version

  12. Niyi Olonishakin
    December 31, 2018 at 13:17

    Thanks! what a good work! pls, keep it up.

  13. Brian Smith
    December 31, 2018 at 13:17

    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 🙂

  14. Vikas Rathod
    December 31, 2018 at 13:17

    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.

  15. amir choubani
    December 31, 2018 at 13:17

    wonderful work.
    Just one question, how to make the sidebar with fixed position when i scroll down.

  16. Nguyễn Mạnh
    December 31, 2018 at 13:17

    Hi! how to show the menu by default?
    thank you!

  17. Roxana O.
    December 31, 2018 at 13:17

    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.

  18. NitishKB
    December 31, 2018 at 13:17

    Thank you sir

  19. NitishKB
    December 31, 2018 at 13:17

    Sir need responsive slideshow using bootstrap and css. Reply soon as possible

Leave A Comment

You must be logged in to post a comment.