• Monday , 14 October 2019

Bootstrap Tutorial for Beginners – 11 – Sidebar Menu Templates

Code Canyon
https://i.ytimg.com/vi/tuuLDy1dev0/hqdefault.jpg



Facebook – https://www.facebook.com/TheNewBoston-464114846956315/
GitHub – https://github.com/buckyroberts
Google+ – https://plus.google.com/+BuckyRoberts
LinkedIn – https://www.linkedin.com/in/buckyroberts
reddit – https://www.reddit.com/r/thenewboston/
Support – https://www.patreon.com/thenewboston
thenewboston – https://thenewboston.com/
Twitter – https://twitter.com/bucky_roberts

Original source

3d Ocean

Related Posts

47 Comments

  1. Shaik Ismail Zabiullah
    October 7, 2019 at 15:54

    which text editor do you use?? Please send the link of that editor to download it safe!

  2. vipin yadav
    October 7, 2019 at 15:54

    how can we adjust the display of side bar on clicking of button . The site on which Bucky is working has an elegant sidebar which gets displayed in an animated way (kinda slow)…….. how can i do that ?

  3. Willie Scant Company
    October 7, 2019 at 15:54

    i like it

  4. Jake Wright
    October 7, 2019 at 15:54

    Thanks for explaining every part. I mean how else are we really supposed to learn by copy and pasting some code. This worked great for me. My only thing is, I can't get the button to go over the top of my navbar. I've tried a couple things like pull-left or even other menus but it won't go over the top of my navbar haha anyway great job dude, I will definitely be watching more of your videos.

  5. madikanti
    October 7, 2019 at 15:54

    te paraszt

  6. Sandeep Hrithik
    October 7, 2019 at 15:54

    hi sir my desing sidebar not working

  7. Nickey Smickey
    October 7, 2019 at 15:54

    I copied the code from github but i get a blank area to the left of the navbar which not only looks stupid, but it also makes the content-part + blank area more than 100% wide. So i have a scrollbar because the content cant be contained within the window.
    Anyone have an idea?

  8. KUSHAL MAJUMDER
    October 7, 2019 at 15:54

    hi @thenewboston what i need to do in the javascript portion if i want do display the menu by default?

  9. junellesuaybaguio
    October 7, 2019 at 15:54

    how about if you have a dropdown menu? i am having a big problem, i followed your tutoria and it worked but the problem is i have a dropdown menu

  10. LazerPhreak
    October 7, 2019 at 15:54

    If it's not displaying, make sure the <script> tag for jQuery is BEFORE the script for toggling the sidebar.

  11. Tayyab Saeed
    October 7, 2019 at 15:54

    This doesn't work for me, I don't know why… I tried to remove all my code at the end and copied Bucky's code from the github but it didn't worked. I thought its jquery but after testing that, it was not the problem. Can anyone help or anyone had the same issue? Or anyone can give me a link to a nice tutorial where I can find the same thing but with bootstrap?

  12. daverdal1
    October 7, 2019 at 15:54

    great info, but if you use a black background in your code you should use it in your webpage. My eyes get destroyed when you switch screens.

  13. Aniket Jha
    October 7, 2019 at 15:54

    what should be done if i want the toggle menu to come over bottom layouts.

  14. Umer farooq
    October 7, 2019 at 15:54

    Which too you are using here in this video for bootstrap ???

  15. Nadia
    October 7, 2019 at 15:54

    amazing! thank you!!

  16. BLYAT
    October 7, 2019 at 15:54

    thanks i love you

  17. Hyeonil Choi
    October 7, 2019 at 15:54

    Thanks this information. Thank you.

  18. Neil Achacoso
    October 7, 2019 at 15:54

    thank you so much!

  19. alhaji kabba
    October 7, 2019 at 15:54

    Well done Sir

  20. Sheraz Tariq
    October 7, 2019 at 15:54

    how can we display sidebar icons when its not displaying

  21. zaid iftikhar
    October 7, 2019 at 15:54

    where nested hover effect code..i wanna this .When i clicked back to small side it did not show me result of hover effect i give two time hover effect in nested menus of div it was show me nested div inside of parent div

  22. Clara Martins
    October 7, 2019 at 15:54

    How can we have menu on left and also on right?

  23. Amit Nair
    October 7, 2019 at 15:54

    how to add footer to entire page,without sidebar overlapping footer.

  24. Leverquin
    October 7, 2019 at 15:54

    i kinda would like an apple pie.

  25. Joe Fugere
    October 7, 2019 at 15:54

    Is there a way to to have a tab attached to the actual side bar instead of having the toggle menu button

  26. Detroit 70
    October 7, 2019 at 15:54

    use of z index ?

  27. JD Media
    October 7, 2019 at 15:54

    Hello,
    can anyone help me
    I did same as tutorial but it's not working once I click "toggle menu"
    I think there is an error in java script part, please check below

    <script>
    $("#menu-toggle").click(function (e){
    e.preventDefault();
    $("#wrapper").ToggleClass("menuDisplayed");
    });
    </script>

  28. Chrisell Bencalo
    October 7, 2019 at 15:54

    What you did is place on the left, how can I put the side bar on the right? Thanks 🙂

  29. Jorgenlybeck
    October 7, 2019 at 15:54

    You know you're a coder when your answer to "What's your favorite color" is "Hashtag 2C3E50" haha. Great tutorial!

  30. Dardan Isufi
    October 7, 2019 at 15:54

    height: 100vh ; it's mutch better then 100%

  31. Ram babu Meena
    October 7, 2019 at 15:54

    easy and awesome way to explain and really helpful thank you very much to provide such a wonderful tutorial…

  32. Ucizi Mafeni
    October 7, 2019 at 15:54

    Also, if you wanted a navbar like on your thenewboston website, would you place it in the page-content-wrapper?

  33. Ucizi Mafeni
    October 7, 2019 at 15:54

    How can the toggle animation smoother? i.e it slides out rather than just popping out

  34. Drashya Kushwah
    October 7, 2019 at 15:54

    Can pycharm community edition also create sidebar menu templates ??
    Cozy in my program this code is not working 🙁

  35. Kitara Frei
    October 7, 2019 at 15:54

    Hi, when the page has a lot of content, when you scroll down the menu background doesn't go to the end. How can we fix that? Thank you, great tutorial!

  36. ZHENZHOU YU
    October 7, 2019 at 15:54

    this method has a problem. Because you make sidebar and main content are absolute position.Then if you want add something outside the wrapper,it will get mess.

  37. Erudite
    October 7, 2019 at 15:54

    Thanks for the tutorial! Got most of it working but one major thing!
    The links/tabs dont work! Nothing happens when I hover over it, and the browser doesnt even indicate that it should be link (ie no little link preview at the bottom of my window)

    I included all the CDNs and triple checked the code….

    Admittedly I am doing this inside of another project that I need this sidebar for… however I dont see any conflicting reasons as to why it wont work.

    I suppose I'll make a standalone thing to check but…. sigh… kinda pointless if this does not work in my current project.

  38. Alex Svistunov
    October 7, 2019 at 15:54

    you are just great at giving tutorials man, straight to the point and easy to understand. By the way, is there any way to have the menu already open by default? thank you!

  39. Aerotech Plus Two
    October 7, 2019 at 15:54

    instead of padding-left:250px; why don't you replace padding-left with margin-left because padding-left overlays over the toggled division.. it makes more sense

  40. Adan Xasan
    October 7, 2019 at 15:54

    Thank u very much Mr Bucky. I learnt a lot from you.

  41. Adan Xasan
    October 7, 2019 at 15:54

    It didn't work for me at first, but when I removed #wrapper from the two below, it worked perfectly.I don't know the reason.could someone explain it for me.thnx

    #wrapper.menuDisplayed #sidebar-wrapper{
    width: 250px;
    }

    #wrapper.menuDisplayed #page-content-wrapper{
    padding-left: 250px;
    }

  42. estebancol4
    October 7, 2019 at 15:54

    This is great! I'd say this is the start of level 2 compared to the previous videos haha

  43. Harsh Bulchandani
    October 7, 2019 at 15:54

    How to align the sidebar on right side instead of left??

  44. Ankit Thakur
    October 7, 2019 at 15:54

    i'm not able to give a background color to #wrapper , any particular reason?
    rest of it works great !! .

  45. Ronit Ghosh
    October 7, 2019 at 15:54

    I guess he meant overflow-x and not overflow-y, right?

  46. Ronit Ghosh
    October 7, 2019 at 15:54

    how to code such that the sidebar disappears and appears slowly and smoothly as in Bucky's site?

  47. Evie
    October 7, 2019 at 15:54

    This was very helpful. Thank you!

Leave A Comment

You must be logged in to post a comment.