Good evening,

 

I was wondering if someone could help me. I am trying to get my submenu li spacing to be even but I cannot see what is causing the problem. Can anyone see what I am missing.

 

Website address is here. Thanks in advance :-)

Whatever script you are using for you menu is adding a tonne of inline styles, this doesn't seem to be a very good way of doing things. I'd drop the script and use CSS for layout as the menu is not so complex you need javascript for any layout.

 

For the submenu I recommend you make use of display-table and display-table-cell you can use that to make each item have equal spacing. Something like this..

<ul class="submenu">
  <li>item</li>
  <li>item</li>
...
</ul>

.submenu {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}

.submenu li {
  display: table-cell;
  width: 100%;
  line-height: 30px; /* height you want the item */
  vertical-align: middle;
}

Edited March 21, 201511 yr by rbrtsmith

Not on the same topic but is likely to pose a problem

 

Here is a shot of the home page in 360px x 640px from the Developer tools in FF.

 

 

Note the text objects overlapping each other.

Hey thanks for your comments so far...

 

Yes the website is still being developed and I am aware of the responsive issues, thanks for taking the time to comment though.

 

The website is being built using a theme chosen by the client so I am having to make do with what I have at the moment.

You're gonna struggle to fix those issues then, this is one of many problems when taking a theme and trying to hack away at it. It's best to build from scratch to match the specification, or if the client has a really tight budget then just put in the theme and don't touch the code.

 

Hacking away at pre-built themes rarely, if ever ends well unfortunately. For now work with what you have and make the best of the situation.