manipulate menu ul/li twenty eleven

sorry…
blank <span> or <li> element…

It’s not clear from that what you are trying to do – do you have an example of it someplace? What theme are you using and a link to your site would also be relevant.

my site isn’t online…
the idea is to justify the horizontal menu items (like in a text editor). from what i’ve found so far there are only two ways to do so (without javascript) one would be to insert an empty element at the end of your list and give it width:100% so it forces the line to break and to use text-align:justify in the surrounding div.
like that:

<div id="menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 2</a></li>
  </ul>

  <span></span>
</div>

#menu {
  text-align: justify;
}

#menu * {
  display: inline;
}

#menu span {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 0;
}

i would like to test that, but don’t know how/where to insert this span in my twenty eleven menu container div…
thanks

Sorry, still trying to get what you are trying to do – do you want the entire menu to stretch the width of the page or each item?

sorry…
i want the menu to stretch and with equally wide space in between… i think… i’m getting confused now…

that would be the idea…

as i don’t know the amount of li-items i can’t use width:xx% …

Okay, let me play with that theme on a test site… But do you have custom CSS or a child theme set up? You need to do that before making any changes to theme files.

Once you have the above set up, add the custom CSS code there:

I’m not sure there is an easy way to do what you want – this seems to work, but you will have to change the CSS if you add more menu items:

#access div {
    width: 100%;
}

#access li {
   width: 18%;  /*this is for 5 menu items - you need to change the percentage according to how many menu items you have */
}

There might be a more elegant way to do this — you could try asking on a CSS forum such as https://csscreator.com.

thanks. this is not working, as the amount of first level list elements could change…
thanks for the link. will have a look into it.

… I’m still doing some research on this topic… maybe i should simply go with display:table-cell… etc. apparently there are solutions out there to trick the odd IE into it…
this way i don’t have to mess around the code…

and
*shameful* i started working on this site some while ago and just got back into doing some big changes. just learned about child themes while in the middle of it…
so, yes/no, renamed the theme but unfortunately not a child theme anymore…
was wondering if i should start all over again but too afraid of all the consequences…