[Resolved] Adding right aligned text in primary navigation bar

[Janice Dykeman]

I would like to have our phone number appear in the menu bar, right aligned, like the following pic:

Is there a simple way to do this?

Cheers!

[David]

Hi there,

simplest way is to add it as Custom Link to your Menu, give it a CSS Class of custom-menu-item

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then add this CSS:

@media (min-width: 769px) {
    .main-navigation ul {
        display: flex;
    }

    .custom-menu-item {
        margin-left: auto;
        /* Remove below line if you want the link to be clickable */
        pointer-events: none;
    }
}

If you want remove this from the mobile menu then add the hide-on-mobile and hide-on-tablet to the menu items CSS Classes ( separated by spaces )

[Janice Dykeman]

Brilliant!

Thanks!

[David]

You’re welcome

[Author]

Posts