Centering Nav in Infinity Pro

[lukestiller]

Hi! I know this question has been answered before but it's not quite working for me. I've changed the header bar to be transparent until scrolling even with the header image, as per these instructions.

Doing so uncenters the nav links so in the comments the fix is:

@media only screen and (min-width: 801px) {
    .site-header > .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .nav-primary {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

    .title-area {
        -ms-flex-item-align: start;
            align-self: flex-start;
    }
}

However, this seems to center the navigation links to between the end of the header image and the right of the header bar. But how would I be able to get the links centered in the middle of the entire header bar?

I would very much appreciate any help. Thanks!

[Brad Dalton]

You could use CSS grid. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

---

Tutorials for StudioPress Themes.

[Victor Font]

Here's an article that explains how to use CSS grid with the Genesis header. https://victorfont.com/customize-the-genesis-header-with-css-grid-layout/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts