Display Flex Won't Center Content

My issue is that I cannot get the main menu to horizontally center with the use of display:flex on this page.

I have this applied to the parent item:

#menu-main-menu {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    align-content: center;

This is a first guess :slight_smile:

#menu-main-menu is a <ul> within an HTML table-cell. The flex-box is a bit silly where it is located. If you want to center the menu, then center the table. These resets for the table and related elements are from the
so you should override the table in your local stylesheet. I doubt that you need to override anything other than the table. Start with the least (table only) and add more if needed.

div.shailan-dropdown-menu table, 
div.shailan-dropdown-menu tbody, 
div.shailan-dropdown-menu tr, 
div.shailan-dropdown-menu td, 
div.shailan-dropdown-menu ul,
div.shailan-dropdown-menu li, 
ul.dropdown * {
    border: 0 none;
    font-size: 100%;
    line-height: 1;
/*    margin: 0;  /* override the table {margin:0} by changing it to {margin:0 auto} */
    padding: 0;
.dm-align-left table {
/*    float: left;  /* override/disable this float */


FYI: You can add outlines around the contents of the menu boxes to see where they are and how they are behaving by doing something like this temporarily:

div.shailan-dropdown-menu * {
    outline:1px dashed red;

or this:

.site-header-main * {
    outline:1px dashed red;
1 Like

Why is it even in a table anyway?
Are we using today’s css layout methods (flex) or not?

I wondered the same thing, but it was his design decision to use that widget.

It’s the plugin that was chosen, and I was asked to fix it.

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