Display Flex Won't Center Content

HTML & CSS
1

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;
}
2

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
http://37.60.239.80/~dvkapuser/wp-content/plugins/dropdown-menu-widget/css/shailan-dropdown.min.css
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, 
div.dropdown-horizontal-container, 
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
3

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

4

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

5

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

6

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