Hi Dianne

1. To add a line between each menu item try adding the following to the Custom CSS field of your templates parameters...

#hornav ul a, #hornav .separator {

    border-left: 1px solid #BBBBBB;

    margin-top: 30px;

    padding: 2px 12px;

}

2. For the active/current item also add the following...

#hornav li.active a {

    border-bottom: 3px solid #BBBBBB;

}

3. And finally for the hover state also add the following...

#hornav ul li a:active {

    border-bottom: 3px solid #BBBBBB;

}

Of course you may wish to edit the border width and color to your own taste for each.

Ciarán

The code you provided below worked with a few tweaks but there are a few things (small, I hope) that are not working the way they want them to. I've made some edits to your code (in bold below) toward the end result I'm looking for but could I trouble you for a little more guidance?

#hornav ul a, #hornav .separator {
border-left: 1px solid #888;
margin-top: 38px;
padding: 0px 10px;
line-height: 16px;
}

#hornav li.active a {
border-bottom: 1px solid #990000;
}

#hornav ul li a:active {
border-bottom: 1px solid #990000;
}

The three remaining challenges are...

-- The "active" line under the menu item spans the space between the two separators. Is there a way to have it only span the words? In this sample, the darker line under "technology/safety" illustrates what I'm shooting for [also, the word "service" below illustrates it a little better only in red].

[illustrates when you go to click on a menu item]
<Screen shot 2013-09-09 at 9.30.07 AM.png>

-- The "hover line" under each menu item when you roll over should be red. It's black now but I can't see where to make the change.
[illustrates rollover affect on the word "service"]
<Screen shot 2013-09-09 at 9.30.19 AM.png>

-- When you go to click the link, both "hover lines" appear under the nav item being selected (see "technology/safety" above. Is there a way to eliminate that without eliminating the hover affect over the other items? This is subtle and disappears as soon as the page becomes active but it's not the desired "affect".

A live example of what I'm looking for is here with the nav for this site... http://www.audiusa.com site. I've studied the css behind their nav affect but I don't know what to pull from it or where to put it if I could figure it out.

Thanks in advance for taking another look at this. You are much appreciated. I sang your praises to another developer friend of mine yesterday. She's sold and will be switching to your templates for her next project.

Take care... Dianne

[RESPONSE FROM CIARAN]

Hi Dianne

Regarding the border spaning the words issue there is a solution however due to the way Joomla renders its menus it would mean removing the left borders (line dividing each menu item) like what you see on the Audi site. If this is ok I will send you the CSS.

The remaining issues are pretty much connected. The black underline you see on the hover items is a default text-decoration (http://www.w3schools.com/cssref/pr_text_text-decoration.asp). This underline can only be the same color as the text so a solution would be to remove the text-decoration and replace it with the red border underline however you will find that this brings us back to the first issue as unlike the text-decoration, the border spans beyond the words. To do so add the following...

#hornav ul li a:hover {
border-bottom: 2px solid #990000;
text-decoration: none;
}

Regards
Ciarán
Joomla51
-----------------
To keep up to date on our daily promotions and release info you can...
'Like' us on Facebook
'Follow' us on Twitter

Hi Ciaran,

Thanks for the really quick response and the advise. It's good to have the insight that it's partly how Joomla renders things. That saves me from digging around too much for something I won't find.

I'm going to say that if presented with an either/or scenario, the red underline is more preferred than the left borders so I'm going to go with that solution. If you have code I could use, that would be great.

Also, I am looking at the css sample you sent below and I found the text-decoration where I need to remove the underline. I added the bottom border and it now puts the border under each nav item when I hover. The only thing left is to make it the exact width of the characters in each nav item. I tried taking out the left separators but that didn't work. I suspect there's more code needed, right?

Here's the code that's in the custom CSS section of the template parameters.

#hornav ul a, #hornav .separator {
border-left: 1px solid #888;
margin-top: 38px;
padding: 0px 10px;
line-height: 16px;
}

#hornav li.active a {
border-bottom: 2px solid #cc0000;
}

#hornav ul li a:active {
border-bottom: 2px solid #cc0000;
}


This has helped a lot! Do you need anything from me?

Thanks very much!... Dianne

Oops... one note... the only hornav menu item that doesn't have a bottom-border hover is the home link. Do I need to put some code in another place for that one?

Thanks... D

Hi Dianne

The following will remove the left border while adjusting the margin/padding of your menu items so the border remains just under the span of each word...

#hornav ul a, #hornav .separator {

    border-left: none !important:

    margin: 38px 10px 0;

    padding: 0px;

}

Ciarán

To amend the issue regarding the first menu item could you try also adding the following to the Custom CSS field...

#hornav li:first-child a {

    border-bottom: 2px solid #FF0000;

}

Ciarán

Hi Ciaran,

I've worked out about 90% of the issue with the hornav. The code you gave me work to a degree but threw off other things and when I tried to recover, things got messy... ~;-) I was able to start over and get things almost to where I want them but there still remains a few small things I can't figure out.

1. The red underline appears under each nav item when you hover over it but rather than adjust to the span of each nav item, it's still a little too wide.

2. The red underline doesn't appear under the Home item at all. When I put in the code you suggested, it put a red line there which displayed all the time rather than just upon hover. I need that menu item to behave the same way the others do.

3. Finally, the red line is a little to far away from the bottom of the words. There should be less of a gap. Not butting up against the words but just under the background. In the end, if this can't be adjusted, it doesn't bother me too much but it would be good to tighten it up a little bit.

References:
The site is here... http://50.87.144.123/~ubj/index.php
The nav effect I'm looking to duplicate is here... http://www.audiusa.com/

I've attached my two css files with hornav references... nexus and template.

When you have a minute, could you see where the adjustments need to be made?

Please let me know if you need anything else from me.

Thanks!... Dianne

Hi Dianne

Hope all is well.

1./3. Could you try adding the following to your Custom CSS field... this should amend both issues mentioned in point 1 and 3

#hornav ul a, #hornav .separator {

    margin: 0 8px;

    padding: 3px 0 0;

}

2. My fault... the CSS should have been the following...

#hornav li:first-child a:hover {

    border-bottom: 1px solid #FF0000;

}

Ciarán

Finally! Thanks!

These fixes worked though only when I put them in the nexus.css file. For some reason, they had no effect when I put them in the Custom CSS parameter in the template. No worries. I'm happy with them as is now.

Thank you for taking the time to look and help. Once again, you helped me keep my sanity... ~;-)

Take care!... D