The evolt admins said the message came in, but was auto-discarded.
Please try again, but this time don't cc: the list admin address. I
think Mailman assumes that sort of thing to be spam (or maybe I set up a
spam filter along those lines). Hopefully it'll work this time!
On 30 Dec 2015, at 21:20, Rick Gordon wrote:
[I sent this yesterday, but it hasn't gotten posted. Trying again,
along with a cc to the list-admin. I still don't see any of the
December posts in the public list archives, so I'm wondering if things
are still acting screwy.]
---
On [http://www.theshelterblog.com](http://www.theshelterblog.com), (a
WordPress site) I've set up the top navigation with flexbox CSS, so
that it justifies to the content width, with equal spacing between
menu <li> elements. The navigation changes from relative to a fixed
stickyNav, when the menu would move out of view (on home, archive, and
search pages).
Before I updated WordPress to 4.4, I had it all working without
flexbox, where the <ul> was set to text-align:justify; and I had a
dummy last menu item that was classed to have 100% width and no
height. For reasons I'm not sure about, the update from 4.3 to 4.4
broke it, and all the menu items were butted up against one another to
the left.
So then, after banging my head against a wall for a while with no
working solution, I revamped it with flex code, as such:
#menu-header-navigation { /* <ul> */
width:100%;
position:relative;
list-style:none;
padding:4px 0 5px 3px;
text-align:center; /* So now fallback centers, with separation
effected by transparent borders */
display:inline-block; /* final fallback */
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
-webkit-box-pack:space-between;
-moz-box-pack:space-between;
-ms-flex-pack:space-between;
-webkit-justify-content:space-between;
justify-content:space-between;
-webkit-box-align:stretch;
-moz-box-align:stretch;
-ms-flex-align:stretch;
-webkit-align-items:stretch;
align-items:stretch;
flex-wrap:nowrap;
align-items:stretch;
flex-grow:1;
}
.sf-menu li {
display:inline-block;
position:relative;
padding:2px 0;
}
.no-flexbox .sf-menu li { /* .no-flexbox being assigned to
html by Modernizr */
border-left:.5em solid transparent; /* Could probably
be margin at this point, having removed other margin assignments */
border-right:.5em solid transparent;
}
I had tried suggestions (such as at
[http://jsfiddle.net/csswizardry/zfSt4/](http://jsfiddle.net/csswizardry/zfSt4/))
of setting display:table; table-layout:fixed for <ul>, and
display:table-cell for the <li>s, but it created unequal spaces
between the <li>s and caused overlaps when reducing the window width.
I no longer have the working 4.3 installation available, though I
could restore it to a staging site if needed.
I'd appreciate any guidance. The centered fallback is OK, but I'd
really prefer an equally spaced, fully justified look.
___________________________________________
RICK GORDON
[http://www.theshelterblog.com](http://www.theshelterblog.com)
--
Eric A. Meyer - http://meyerweb.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
