Bootstrap 4 sidebar menu with submenu responsive with code 2018



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”

  1. 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.

  2. 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;

  3. 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 🙂

  4. 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.

Leave a Reply