Aligning navigation menu to the right in WordPress theme

Other Questions Wordpress
1

I’m trying to move my WordPress navigation menu to the right side of the header. I’ve already tried using align="right" but it didn’t work. Here’s a snippet of my current header code:

<header class="site-header">
    <!-- Other header elements -->
    <nav class="main-navigation">
        <?php
        wp_nav_menu(array(
            'theme_location' => 'primary-menu'
        ));
        ?>
    </nav>
</header>

Can someone help me figure out how to push the nav menu to the right? I’m not sure if I need to use CSS or if there’s a WordPress function I’m missing. Thanks in advance for any suggestions!

2

Jack81, I’ve encountered this issue in several WordPress projects. Instead of modifying your PHP, I recommend using CSS Grid for a more modern and flexible approach. Add this to your stylesheet:

.site-header {
display: grid;
grid-template-columns: auto 1fr auto;
}

.main-navigation {
grid-column: 3;
}

This method creates a three-column layout, pushing your navigation to the right while maintaining responsiveness. It’s compatible with most browsers and doesn’t require additional clearfix techniques. If you need further adjustments, let me know your specific layout requirements.

3

Hey Jack81, I’ve been through this exact issue before when customizing WordPress themes. The solution is actually pretty straightforward using CSS. You don’t need to modify your PHP code at all.

Add this CSS to your theme’s stylesheet or custom CSS section:

.main-navigation {
    float: right;
}
.site-header {
    overflow: hidden;
}

This will push your navigation to the right side. The ‘overflow: hidden’ on the header ensures it contains the floated element properly.

If that doesn’t quite do it, you might need to adjust some padding or margins, depending on your specific theme. But this should get you most of the way there.

One thing to watch out for: make sure your menu items don’t wrap awkwardly on smaller screens. You might want to add some responsive styling to handle that. Good luck with your theme customization!

4

yo jack, have u tried flexbox? it’s pretty dope for this kinda thing. just add some css like this:

.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

that should push ur nav to the right without messin with floats. lemme know if u need more help!