[ad_1]
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
47 responses to “Bootstrap Tutorial for Beginners – 11 – Sidebar Menu Templates”
which text editor do you use?? Please send the link of that editor to download it safe!
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 ?
i like it
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.
te paraszt
hi sir my desing sidebar not working
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?
hi @thenewboston what i need to do in the javascript portion if i want do display the menu by default?
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
If it's not displaying, make sure the <script> tag for jQuery is BEFORE the script for toggling the sidebar.
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?
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.
what should be done if i want the toggle menu to come over bottom layouts.
Which too you are using here in this video for bootstrap ???
amazing! thank you!!
thanks i love you
Thanks this information. Thank you.
thank you so much!
Well done Sir
how can we display sidebar icons when its not displaying
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
How can we have menu on left and also on right?
how to add footer to entire page,without sidebar overlapping footer.
i kinda would like an apple pie.
Is there a way to to have a tab attached to the actual side bar instead of having the toggle menu button
use of z index ?
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>
What you did is place on the left, how can I put the side bar on the right? Thanks 🙂
You know you're a coder when your answer to "What's your favorite color" is "Hashtag 2C3E50" haha. Great tutorial!
height: 100vh ; it's mutch better then 100%
easy and awesome way to explain and really helpful thank you very much to provide such a wonderful tutorial…
Also, if you wanted a navbar like on your thenewboston website, would you place it in the page-content-wrapper?
How can the toggle animation smoother? i.e it slides out rather than just popping out
Can pycharm community edition also create sidebar menu templates ??
Cozy in my program this code is not working 🙁
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!
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.
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.
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!
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
Thank u very much Mr Bucky. I learnt a lot from you.
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;
}
This is great! I'd say this is the start of level 2 compared to the previous videos haha
How to align the sidebar on right side instead of left??
i'm not able to give a background color to #wrapper , any particular reason?
rest of it works great !! .
I guess he meant overflow-x and not overflow-y, right?
how to code such that the sidebar disappears and appears slowly and smoothly as in Bucky's site?
This was very helpful. Thank you!