Archived topic

Center Navigation Button on Desktop

3 replies · Started by Kyle on September 21, 2022

Viewing posts 1–4 of 4

September 21, 2022 at 11:08 am #2349864

Hi all, I'm using GeneratePress and GenerateBlocks to insert a navigation button using an Element. But I'd love to have the button centered in the nav bar on desktop view.

I'm currently using the after_logo hook and the Navigation as Header setting. Curious if there's a way to center the button?

Staging Site: https://cend.yondermooncreative.com/

What I want to accomplish: https://drive.google.com/file/d/101i2enmBHpA649P6Td993IUo_ZBpKA-0/view?usp=sharing
What I have now: https://drive.google.com/file/d/1bX1cRpu_yXPB7LXP8tnIh7gmTSw5Zfqa/view?usp=sharing

Thanks so much!

September 21, 2022 at 12:18 pm #2349936

Hi Kyle,

Try this CSS:

@media (min-width: 769px) {
    .site-logo + .gb-button-wrapper {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

September 21, 2022 at 12:35 pm #2349952

Amazing, works perfectly! Thank you so much.

September 21, 2022 at 1:46 pm #2350003

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.