I want to center elements in the Parallax Pro Header

Community Forums Forums General Discussion I want to center elements in the Parallax Pro Header

This topic is: resolved

This topic contains 5 replies, has 3 voices, and was last updated by  pcgs51 8 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #88887

    pcgs51
    Participant
    Post count: 28

    I want to center elements in the Parallax Pro Header. Specifically the logo and the .site-header .widget-area that normally appear on the left (logo) and the right (widget area).

    I managed to get the .site-header .widget-area to go full width and center the menu in the header but I also need to make the logo in the header appear centered above the menu. I cannot get that logo to budge. What am I missing here?


    http://tfdemo2.wpengine.com/


    Thanks,
    pcgs51

    http://tfdemo2.wpengine.com/
    #88889

    nutsandbolts
    Moderator
    Post count: 3140

    Try this –

    (1) Add a margin: 0 auto; to this rule:

    .header-image .site-title > a {
    background-size: contain !important;
    display: block;
    height: 143px;
    text-indent: -9999px;
    width: 400px;
    margin: 0 auto;
    }

    (2) Change the width of .title-area from 400px to 100%, remove the float: left, and add margin: 0 auto; to it as well.

    .title-area {
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
    }

    If that doesn’t work, leave it in place and let me know; I’ll be glad to take another look.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88894

    pcgs51
    Participant
    Post count: 28

    Hi Andrea!

    That works almost 100%. The only flaw is that the image doesn’t scale for devices like the rest of the site does when you view in a less than 480px width device. It pushes off to the right by about 40-60px when viewing on a 320px wide iPhone. Looks fine at the 480px width and up.

    But this is way better than it was.
    Thanks again!


    Thanks,
    pcgs51

    #88895

    nutsandbolts
    Moderator
    Post count: 3140

    Okay, try this. At the very bottom of the stylesheet, add this:

    @media only screen and (max-width: 399px) {
    .header-image .site-title > a {
    width: 100%;
    }
    }

    Let me know if that fixes it – it does for me in Inspector but that doesn’t necessarily mean it will work in real life.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #88901

    sdbroker
    Participant
    Post count: 106

    Under .header-image .site-title > a change width: 400px; that you currently have to max-width: 400px;.

    It works for me without having to change or add anything else to the @media code.

    #88911

    pcgs51
    Participant
    Post count: 28

    Many thanks to you both Andrea and sdbroker! They both work. I’m currently using sdbroker’s solution but both are helpful for the sake of learning.

    Thanks so much for the generosity of your time and talents!


    Thanks,
    pcgs51

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.