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

Development Tools

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Posted by Natasha McDiarmid
Natasha McDiarmid
11,400 Points

Bootstrap Toggle Button Causing Page Reload

HAML + Bootstrap

The mobile button, when clicked, is causing the page to reload. So the expanded menu never gets a chance to show.

What am I doing wrong?

%nav.navbar.navbar-default{:role => "navigation"}
  .container-fluid
    / Brand and toggle get grouped for better mobile display
    .navbar-header
      %button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
        %span.sr-only Toggle navigation
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      %a.navbar-brand{:href => "#"} Brand
    / Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li.active
          %a{:href => ""} Link
        %li
          %a{:href => ""} Link
      %ul.nav.navbar-nav.navbar-right
        %li
          %a{:href => ""} Link
    / /.navbar-collapse
  / /.container-fluid
Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Can you give us a codepen or show us your website to see it live

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Natasha,

I spent about an hour or so trying to reproduce what you're describing. I launched the page from a local server, viewed it in mobile and the menu button worked fine.

I've exhausted the limits of my ability to troubleshoot this. If you ever figure this out, I'm curious to know.

Best Regards

1 Answer

Natasha McDiarmid
Natasha McDiarmid
11,400 Points
Natasha McDiarmid
Natasha McDiarmid
11,400 Points

The problem was the button element. I changed it to an anchor link and that resolved the issue.

So instead of:

button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}

It's now:

%a.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

That's great you were able to figure it out - quite the needle in a haystack. Thanks for sharing :)