Vertical centring with right alignment of hamburger icon in Bootstrap navigation

[akarev]

Hi everyone,

I am trying to vertically align hamburger icon in the navigation bar for the Tablet version of my website (which I am building using 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 <b>a short video</b> 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. <b>The line which causes the problem is located on line 242 in my custom CSS file (assets/css/mb-grupe.css)</b>.

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.

[Atelierbram]

You could try putting position: relative on that float-right class, then the button with position: absolute (BTW why not set right: 0 in stead?) might stay in place. Could also try display: inline-block with vertical-align: middle but maybe even better try flexbox though. I like the video; it’s kind of amusing to see: digging yourself into a hole: we’ve all been there with CSS! Can you make a demo of this, (because you can’t expect people over here to download a zip-file).

[Author]

Posts