Hi,

I'm trying to customise the menu to look like this:



I've got the coloured strips underneath the menu items. I saw in another topic that this was the way to do it:

#horizontala .ux-menu LI.ux-menu-item[MENU_ITEM_ID] A.ux-menu-link-level-0

But I couldn't get it to work for me. Instead using 'li#ext-gen7' with the different numbers and that does work. I don't know if you can see any problems with my way, or why the other way wouldn't work?

The part I'm really struggling with is the image for the home menu item. I just can't seem to get it there. Please could you advise on the best way to this?

Many thanks,

Ollie Webb

Hello,

What CSS rules(s) do you use and what doesn't work? Where we can see the problem?

Regards,
ARI Soft

This is the CSS:

li#ext-gen13
{
border-bottom: solid 6px #C01531;
}
li#ext-gen7
{
border-bottom: solid 6px #E95045;
background: transparent none;
}
li#ext-gen8
{
border-bottom: solid 6px #F2C76B;
background: transparent none;
}
li#ext-gen9
{
border-bottom: solid 6px #C05975;
background: transparent none;
}
li#ext-gen10
{
border-bottom: solid 6px #B5D065;
background: transparent none;
}
li#ext-gen11
{
border-bottom: solid 6px #0FB6BE;
background: transparent none;
}
.ux-menu-container UL.ux-menu LI A
{
border-style: none;
}

The site is live here: testenv.springfield.uk.net

Many thanks.

Sorry, but what CSS rules don't work?

Regards,
ARI Soft

Sorry, this is the css that doesn't have any effect on the menu

#horizontala .ux-menu LI.ux-menu-item[MENU_ITEM_ID] A.ux-menu-link-level-0

For example, this makes the border below 'About Us' appear:

li#ext-gen7
{
border-bottom: solid 6px #E95045;background: transparent none;
}

but this doesn't:

#horizontala .ux-menu LI.ux-menu-item103 A.ux-menu-link-level-0
{
border-bottom: solid 6px #E95045;background: transparent none;
}

I just wondered why when here it says that's how to do it?

www.ari-soft.com/ARI-Ext-Menu/16019-Images-in-first-line-of-horizontal-menu-icons.html

Hope that's clearer!

Many thanks.

Use the following CSS rule:

.ux-menu-horizontal LI.ux-menu-item103
{
border-bottom: solid 6px #E95045;
background: transparent none;
}

Regards,
ARI Soft