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

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

Vertical centring with right alignment of "hamburger" icon in Bootstrap navigation bar.

Hi everyone,

I am trying to vertically centre an element ("hamburger" icon) in the navigation bar while also aligning it to the right side of the container whose width is 720px: http://d.pr/i/1hwZY (image showing what I want to achieve). I have managed to align this icon vertically doing the following:

My HTML:

...
<div class="float-right">
  <button type="button" id="hamburger" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
  </button>
</div>
...

My CSS:

.float-right {
    width: 42px;
    float: right;
}

button#hamburger.navbar-toggle.collapsed {
    height: 32px;
    margin: 0;
    position: absolute;
    top: 50%;
    margin-top: -16px;

}

button#hamburger.navbar-toggle {
    position: absolute;
    top: 50%;
    margin-top: -16px;
}

However, I have stumbled upon a certain problem, now when I press this icon to open the menu, it opens, but when I press it the second time to close the menu it won't close. The problem is explained in this video which I have recorded: http://d.pr/v/1cWjr (video explanation). Also, here are all the files associated with this project as a .zip: http://d.pr/f/19xKj .

I would be very thankful if someone could point out why this Bootstrap "hamburger" icon would not close on click when its position is set to absolute?

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I wasn't able to replicate the problem (it always worked for me), but one thing I might try if I did have this problem would be using a delegate handler. So instead of this:

$("#hamburger").on("click", function(){

I might try this:

$("body").on("click", "#hamburger", function(){
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Hi Steven,

Hm, strange, so when you download my files everything seems to work fine on your computer? I've tried your solution, but unfortunately it did not help me solve the problem: http://d.pr/v/1bBHN .

The problem definitely lies in the following line of code:

position: absolute;

which is presented on line 242 of my custom css file (assets/css/mb-grupe.css). You can download my project files over here: http://d.pr/f/11tlP .

Any further suggestions?