Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Struggling to vertical center content

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #206454
    inlmbrt
    Participant

    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

    #206466
    Shikkediel
    Participant

    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.

    #206475
    inlmbrt
    Participant

    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. :)

    #206479
    Paulie_D
    Member

    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.

    #206480
    inlmbrt
    Participant

    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. :)

    #206483
    Paulie_D
    Member

    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.

    #206509
    Shikkediel
    Participant

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.