[Resolved] How to make navigation menu on center and button on navigation is on the right

[Willya]

Hi,

I want to make my navigation menu centered. While the “Hubungi Kami” button remains on the right.

How to? I’ve tried to change the header alignment to be in the center but nothing changes at all.

Please help 🙂

[Fernando]

Hi Willya,

Here’s a CSS you may try adding through Appearance > Customize > Additional CSS:

@media (min-width: 1025px) {
    div#primary-menu {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    header#masthead .inside-header {
        position: relative;
    }

    nav#site-navigation, nav#site-navigation .inside-navigation.grid-container {
        position: static;
    }
}

Take note though that at some point, at around 1040px, the menu wraps because it doesn’t fit the available space anymore. You could either add another CSS to make the menu font size smaller, or make this code only work up to 1040px.

Hope this helps!

[Willya]

Once again, thank you Fernando for your help! The code you provided works!

So, how to make that code only work up to 1040px?

[Fernando]

You’re welcome Willya!

You can replace 1025 with 1041 in the code.

Hope this clarifies!

[Author]

Posts