CODEWITHSUNDEEP
htmltwitter-bootstrapcssnavbar
DDiran
DDiran

Reputation: 573

How do I vertically align the Bootstrap hamburger menu to the navbar?

I am building a travel website with Bootstrap Studio -> http://stackoverflowquestion.bss.design/

It's going well so far, except for one issue: I am having difficulty vertically aligning the hamburger menu in proportion to the logo.

A quick way of addressing the issue I found was adding the following to the css:

button.navbar-toggle.collapsed {
    top:42px;
}

The issue with this approach however is that:

  1. The logo resizes as the screen gets smaller, but the burger menu stays at the same height
  2. When the user scrolls down the whole navbar shrinks and the burger menu stays at the same height

Now I know that I could add a bunch of @media queries however I'll end up with a huge number of them and I was wondering whether there was a better way of always having the burger menu vertically centered to the logo?

Upvotes: 1

Views: 1618

Answers (2)

zgood
zgood

Reputation: 12581

If it is absolutely positioned you can you use a transform.

Like this:

button.navbar-toggle.collapsed {
    top:50%;
    transform: translateY(-50%);
}

Using % will make it dynamic. This will vertically center it inside its first parent with a position relative or absolute.

Upvotes: 0

Maharkus
Maharkus

Reputation: 2898

You can use flexbox in order to make the menu align as intended.

Add this to the navbar-header element:

display: flex;
align-items: center;

Upvotes: 1

Related Questions