Struggling to vertical center content

[inlmbrt]

Hey guys

I’m struggling to vertically center my nav items and large call to action button inside my header div. Any help would be HUGELY appreciated. :]

http://www.huntr.co.za/staging – The big purple header :)

Cheers

[Shikkediel]

I think I’d go with absolute positioning in this case :

.navbar-right {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

This rule is inside the min-width: 768px media query.

[inlmbrt]

Thanks for the reply @Shikkediel. I’ve changed the layout slightly and have run into the same exact problem. I tried to do something similar with the code you suggested but ran into issues when scaling the nav down to mobile.

Can you please take a look? Ideally, I’d like to vertically center both the menu items / the logo / the menu icon. It would be super helpful to hear your reason for why you used certain code.

Thanks so much for the help. :)

http://www.huntr.co.za/staging

TLDR: Having trouble centering all content in 100px header at top of page. Need to center logo, nav items and nav icon on mobile. :)

[Paulie_D]

Might be a good idea to reproduce just the header in Codepen.io rather than us have to rummage around using developer tools on your site.

[inlmbrt]

I tried earlier but seemed to break the header. :(
I think it has something to do with the Toggle nav.

I’m quite new to CSS and front-end development. :)

[Paulie_D]

I tried earlier but seemed to break the header.

I’d suggest you try again…you can include Bootstrao (it is Bootstrap, right?) inside Codepen.

Either way…it’s hard to help by wading through loads of irrelevant code to get down to the essential point.

We also often find that recreating the issue will lead you to a solution.

[Shikkediel]

I have to agree with Paulie. The bit of CSS I posted was sort of a last resort because I was also having trouble finding a ‘more decent’ solution. Would be a lot easier to debug and make changes from a reduced case on Codepen.

[Author]

Posts