Allign custom created menu in Wordpress Footer vertically

Marty Source

I created custom menu into my Wordpress site. i registered the new menu into functions.php file using this code:

// Add new Footer menu
function register_my_menu() {
register_nav_menu('new-menu',__( 'New Footer Menu' ));
}
add_action( 'init', 'register_my_menu' );

and after that inserted this line into footer.php file from current theme:

<?wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 
'new_menu_class' ) ); ?>

and manu is showing into footer, but its showing into list view, and i want to show vertically inline in footer, of course centered is possible. I used CSS to add inline styling like this:

.new_menu_class {
display:inline-flex;
}

But seems do not many any changes to menu in footer. Any help here?

phpcsswordpress

Answers

answered 1 week ago benf2489 #1

You're applying styles to the container of the wp_nav_menu function where the structure of the returned html is

<div class="new_menu_class"> <ul> <li>...

'container_class' (string) Class that is applied to the container. Default 'menu-{menu slug}->container'. https://developer.wordpress.org/reference/functions/wp_nav_menu/

For your CSS to be applied on the list items (I'm assuming you wish to have the horizontally). you will need to add this class under the arguments for 'menu_class'

'menu_class' (string) CSS class to use for the ul element which forms the menu. Default 'menu'.

If you applied the same class in your question to the menu_class you could apply the following:

.new_menu_class {
    display: flex;
    align-items: stretch;
    justify-content: space-evenly;
    width: 80%;
    margin: 0 auto;
    padding: 0;
}

Looking at your site I can see you have a set width container with media queries, I would suggest the same when applying this so as your UI is clear when viewing on smaller devices.

comments powered by Disqus