:after problem with AutoNav

Permalink
Hi!
I got a problem with that auto nav... The nav should be text-align:justify. I tried it with that :after thing:

.menu ul::after{
content: "";
width: 100%;
display: inline-block;
}

works fine when the nav is hardcoded in the theme... if I exchange it with an GlobalArea and AutoNav Block and it generates EXACTLY the same markup then my hardcoded nav, it does not align correct....
Plz have a look: regio-kreuzlingen.wemako.ch

Ty!

micrdy
 
goodnightfirefly replied on at Permalink Best Answer Reply
goodnightfirefly
There is no white space between the <li> tags.

Text justification spreads out the spaces, so since your markup has none, it has nothing to space out.

Here is how the markup currently is (I hope this doesn't get formatted badly):

<ul><li><a href="/index.php/region/">REGION</a></li><li><a href="/index.php/politik-projekte/">POLITIK / PROJEKTE</a></li><li><a href="/index.php/bildung/">BILDUNG</a></li><li><a href="/index.php/wirtschaft/">WIRTSCHAFT</a></li><li><a href="/index.php/wohnen/">WOHNEN</a></li><li><a href="/index.php/verkehr/">VERKEHR</a></li><li><a href="/index.php/tourismus-freizeit/">TOURISMUS / FREIZEIT</a></li><li style="width:100%; display:inline-block; height:5px;">   </li></ul>


Notice the </li><li> are up against each other. They should be </li> <li> with a space between, or on a new line.
micrdy replied on at Permalink Reply
micrdy
Does not work. I updated it with &nbsp and regular whitespaces. Now there are whitespaces but not justified :(
goodnightfirefly replied on at Permalink Reply
goodnightfirefly
You removed the last <li> you had before with the 100% width. Put that back or use the :after trick you mentioned before, which isn't here now and wasn't there before...
micrdy replied on at Permalink Reply
micrdy
You´re the man. I´m so dumb :D Thank you!
Responsive replied on at Permalink Reply
Responsive
micrdy replied on at Permalink Reply
micrdy
I don´t want to use bootstrap. THX