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

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

I am trying to vertically align hamburger icon in the navigation bar for the Tablet version of my website (which I am building using Twitters Bootstrap) and I have encountered a problem which I can't solve on my own. Basically, I have managed to vertically align the icon using the following CSS:

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

When I click the icon to open up the menu, it opens it, however, when I click in the second time in order to hide the menu it won't work, meaning that nothing happens. My hamburger button in the open state has the same CSS as above:

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

I have recorded a short video demonstrating the problem: http://d.pr/v/1cWjr . I also found that the problem lies in the following line of code:

position: absolute; because when I comment this line of code out everything seems to work fine but the hamburger icon changes its location and moves up in the navigation bar (i.e. it has the different location compared to the closed state .collapsed).

Also, here are my project files: http://d.pr/f/11tlP , feel free to download them to address the issue. The line which causes the problem is located on line 242 in my custom CSS file (assets/css/mb-grupe.css).

I would be very grateful if someone could give me a hint on how I can solve this issue while keeping my hamburger icon vertically aligned in my navigation bar, while also be located on the right side of the container whose width is 720px.

Thank you very much in advance.

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok, I think I might have your solution, and it's a pretty easy fix (if it works for you). Unfortunately, I can't test this in safari, but I did replicate your problem in both Chrome and Firefox. Bootstrap has a built in class called "pull-right".

Remember that div that you put around it called "float-right"? Just replace it with "pull-right". Obviously, you can delete the float-right class from your CSS if it's not used elsewhere. Like this:

   <div class="pull-right">
        <button type="button" id="hamburger-icon" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"  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>

Also, I removed the aria-expand that you had as it was generating errors for me.

When I did that, it started working. Even the hamburger menu would close after initially clicked. Also, and this is just a side note, but you have an error on line 402 of your CSS file. You have this:

border-bottom: 1px solid ##e7e7e7;

Obviously, the typo monster got you! It should be:

border-bottom: 1px solid #e7e7e7;

Hope this helps somewhat! :dizzy:

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

Wow, awesome, Jennifer you are a life saver, I spent 4 days trying to solve this problem using Google, Stackoverflow etc, but simply could not figure out how to solve this issue... So simple, yet so hard ;)

Jennifer, I have one more question for you now, to make it simpler I have just recorded a short video for you: http://d.pr/v/1l01q . Thanks ;)

P.S If I remove the position: absolute from my custom CSS, than this icon won't be vertically centred inside of my navigation bar ;) Any suggestions?:)

Thanks, Alex

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Aleksandrs Karevs Hi! I haven't forgotten about you. I'm tearing my hear out over here now LOL. I can get it pulled to the right and be functional. I can even make it get back inside that row. I can even get it vertically aligned! However, it vertically aligns to the row and not the container :persevere: But we will get it figured out! I'm nothing if not really persistent.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok, it's not the most elegant solution, but give this a whirl. And my suggestion is not to remove the absolute positioning.

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

    button#hamburger-icon.navbar-toggle {
        height: 32px;
        margin: 0;
        position: absolute;
        top: 50%;
        margin-top: -16px;
                margin-left: -42px;
    }
Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

@jennifernordell same here, I've tried everything I could to get it aligned the way I want it to be... Seems like a simple task, but these vertical alignments are always so tricky... It works for the logo, but this "hamburger" menu is just so annoying. And I am so happy that you helped me with the first part of the question, because it was driving me nuts for the past 3 or 4 days. ;)

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

Jennifer Nordell Yeah, I've also managed to align it using margin-left property, was thinking maybe there is a better way of doing so, but that's fine for now, should you come up with a better way of doing it please do let me know ;) It is definitely worth knowing as I imagine this type of problem is pretty frequent in frontend web development.

Thanks again for all your help, you've been very helpful and made my day ;)

Alex

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

Jennifer Nordell by the way, I've tried to click the "hamburger" menu with the second solution and basically the same problem occurs – meaning that the menu won't close when I click the hamburger icon. Here is a short video with why I think this is happening, but I am not entirely sure how to fix it just now: http://d.pr/v/1171E

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

Jennifer Nordell I guess I just need to fix this "ugly" menu which appears when the icon is being clicked on. I need to move the entire menu below the navigation bar (the same way I have done with mobile version of this navigation bar) and than it will probably work just fine.