Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Bootstrap 3 Slide in Menu / Navbar on Mobile

Hi everyone,

Does anyone know how can I change the default slide in direction of the navigation menu when the toggle icon ("hamburger icon") is pressed?

I would like to achieve an effect similar to the one www.shopify.com is using on mobile version of their website: http://d.pr/v/1iEUF (here is a short video presentation of what I am trying to achieve).

Thank you very much in advance.

2 Answers

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Jonathan Grieve I just got an answer from a user on Stackoverflow regarding this question and here is his solution to this problem: https://jsfiddle.net/fido3993/fk63zzbz/3/ . Works just the way I wanted it to work ;)

Thanks for the help anyway! ;)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

It would depend on how the CSS animations are hooked up and how that works.

Here's a JSbin I found that seems to animate on the CSS left property to slide from the left. I'm not sure how your slider works but try animating some of the other position properties or the margin property. :-)

Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Hi Jonathan Grieve , yeah, I also found that example, but here is an even better example which showcases exactly what I am trying to achieve: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_full . Although I do understand every bit of code written in this example, I have no idea how to override Bootstraps default animation settings for this toggle button. I've tried to search for it on the Internet, but honestly speaking could not find very much.

I've checked Bootstraps CSS for the .collapsing class (this is the class which appears to be present during the process when the "hamburger" button is pressed an the menu is sliding out from top to button:

.collapsing {
  position: fixed;
  height: 100%;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}

I've tried changing the height: 100% to width: 100% hoping it would work in a similar manner as in the example I have shown above from w3schools.com, where the logic for this left sliding menu is that initially this menu has a width set to 0 and when the button is pressed the javascript is fired which sets the width of the side menu to 100% with smooth animation, thus it appears on top of the original content with a beautiful left to right sliding effect.

Any suggestions where I could find and replace the default Bootstrap settings for this toggle button? As far as I understand it is presented in Bootstrap "Collapse" plugin which is added with the full version of Bootstrap 3 and which is responsible for this "hamburger" button behaviour.