Wordpress widget menu behaving differently then the HTML menu despite both have the same class

HTML & CSS
,
1

These two menus are coming from the HTML widget that I have constructed using the HTML →
https://www.screencast.com/t/2Hgc6CCt

and these two menus are coming from the hard coded HTML →
https://www.screencast.com/t/3iWLtyvv

The problem in the menus coming from the WordPress widget is that they are not obeying the rule set in the CSS →.footer-menu{flex:1 0 50%;}

However the hard-coded menus are obeying this CSS → .footer-menu{flex:1 0 50%;}

Although, I have successfully injected the class .footer-menu in my WordPress widget →

$nav_menu_args = array(
                'fallback_cb' => '',
                'menu'        => $nav_menu,
                'container'   => 'nav',
                'container_class' => 'footer-menu'
            );

Live WP Link.

2

How does the html for each version of the menu differ?

1 Like
3

Wordpress menu →

<nav class="footer-menu">
    <ul id="menu-menu-3" class="menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4">
        <a href="http://codepen.trafficopedia.com/site01/">Home</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="http://codepen.trafficopedia.com/site01/">Menu 1</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="http://codepen.trafficopedia.com/site01/">Menu 2</a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="http://codepen.trafficopedia.com/site01/">Menu 3</a></li>
    </ul>
</nav>

HTML menu →

<nav class="footer-menu">
            <h2>The menu title</h2>
            <ul>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
                <li><a href="#">Menu Item</a></li>
            </ul>
        </nav>

I tried eliminating many extra WordPress classes and ID’s in the browser but that also didn’t fixed the issue.

4

Because the parent element <div class="widget-item"> does not have the display: flex property.

5

How should we take away? Wordpress is not compatible with the flexbox or there is some organized and legitmate fix?

But we have put this property in the footer container →

.site-footer {
	background: #FFFFFF;
	color: #000000;
	display:flex;
}

and this item is wrapped in the above →

<div class="widget-item">
6

Yes, but that is not the direct parent on the nav, it is nested in a div which is not flex. Flex must be applied to the direct parent.
You could try this css:-

.site-footer .widget-item { display: flex }
1 Like
7

Sir,
@SamA74
Can you please comment on the above?

8

My previous post explains why the flex is not working for that element.
There is nothing special or different about Wordpress. The result is still html & css like any other site, so flex will work in any browser that supports it if properly implemented.

2 Likes
9

I implemented your suggestion it still doesn’t work → https://www.screencast.com/t/sNgWixMYS

I think there is one more problem the <h2> in our HTML is inside the nav, but in WordPress, it is outside the nav.

10

It may be better to try this with that structure:-

.site-footer .widget-item { flex: 1 0 50%  }
2 Likes
11

:clap:wow. Fixed. Thanks!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.