# css menu

**URL:** <https://discourse.softpress.com/t/css-menu/15481>\
**Category:** Freeway\
**Created:** [October 30, 2012, 6:45pm UTC](https://discourse.softpress.com/t/css-menu/15481 "2012-10-30T18:45:01Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 6:45pm UTC](https://discourse.softpress.com/t/css-menu/15481/1 "2012-10-30T18:45:01Z")

</div>

Hi - Im trying to get the orange line that appears on hover, on the NAV, to only be the width on the text at mo it goes across all the text plus the padding? I tried using item divider in the action but you have to use a colour if you use none it does not do it…

CHEERS!

[http://easthalldesign.com/dev1](http://easthalldesign.com/dev1)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [October 30, 2012, 6:47pm UTC](https://discourse.softpress.com/t/css-menu/15481/2 "2012-10-30T18:47:52Z")

</div>

Trying styling the span class “nav” instead of the a tag.

Todd  
[http://xiiro.com](http://xiiro.com)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 6:50pm UTC](https://discourse.softpress.com/t/css-menu/15481/3 "2012-10-30T18:50:55Z")

</div>

Great thanks - but I dont know how to do this ??

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [October 30, 2012, 7:06pm UTC](https://discourse.softpress.com/t/css-menu/15481/4 "2012-10-30T19:06:22Z")

</div>

Untested but try this:

Create a Tag style:

```auto
a:hover span.nav

```

Then give it an attribute

```auto
text-decoration: underline

```

or instead you could use a border with some padding

```auto
border-bottom: 1px solid #f60;
padding-bottom: 20px;

```

Play around with it.

Todd  
[http://xiiro.com](http://xiiro.com)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Ernie\_Simpson](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/e/a587f6/32.png) [@Ernie\_Simpson](https://discourse.softpress.com/u/Ernie_Simpson)\
**Post date:** [October 30, 2012, 7:10pm UTC](https://discourse.softpress.com/t/css-menu/15481/5 "2012-10-30T19:10:38Z")

</div>

As you are using an action to achieve this, I’m not sure you have much say  
in how it appears. The underline is a border-bottom attribute and will be  
as wide as the text plus padding.

–  
Ernie Simpson

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 7:13pm UTC](https://discourse.softpress.com/t/css-menu/15481/6 "2012-10-30T19:13:12Z")

</div>

Thanks I dont use code at all so I dont know how to apply what Todd id talking about? Any way you could walk me through this?

Yes I am using the CSS action?

Surely its possible?

See here - I designed it but didn’t code it  
[http://www.cfclaw.com](http://www.cfclaw.com)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 7:13pm UTC](https://discourse.softpress.com/t/css-menu/15481/7 "2012-10-30T19:13:45Z")

</div>

PS I know the logo is way to big I did tell them!!!

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [October 30, 2012, 7:19pm UTC](https://discourse.softpress.com/t/css-menu/15481/8 "2012-10-30T19:19:18Z")

</div>

Ah, I see you’re using a background image for the underline. I need to look into this further. My suggestion won’t work.

Todd

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 7:20pm UTC](https://discourse.softpress.com/t/css-menu/15481/9 "2012-10-30T19:20:57Z")

</div>

Yep I used to get the correct distance down but I cant get the width the same as content…

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [October 30, 2012, 7:21pm UTC](https://discourse.softpress.com/t/css-menu/15481/10 "2012-10-30T19:21:29Z")

</div>

For starters can you remove the orange line bg image?

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 7:24pm UTC](https://discourse.softpress.com/t/css-menu/15481/11 "2012-10-30T19:24:27Z")

</div>

yes I can

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [October 30, 2012, 7:25pm UTC](https://discourse.softpress.com/t/css-menu/15481/12 "2012-10-30T19:25:00Z")

</div>

That’s because the bg image is attached to the “a” (link) tag. The span.nav style is a child of the “a” tag and that’s what you want to attach the underline to. Btw, you could replicate the effect without an image.

> I cant get the width the same as content…

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 7:27pm UTC](https://discourse.softpress.com/t/css-menu/15481/13 "2012-10-30T19:27:27Z")

</div>

Great - please show me how? I’d rather not use an image if poss - note I dont code and Im using the CSS menu action

I can add snippets into the extended - but a walkthrough would be great!

[http://easthalldesign.com/dev1/personaltrainina.html](http://easthalldesign.com/dev1/personaltrainina.html)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Todd1](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/838e76/32.png) [@Todd1](https://discourse.softpress.com/u/Todd1)\
**Post date:** [October 30, 2012, 7:34pm UTC](https://discourse.softpress.com/t/css-menu/15481/14 "2012-10-30T19:34:57Z")

</div>

Ok, remove it.

Now open the main Styles editor and create a new Tag style

```auto
ul#fwNav1 li a:hover span.nav

```

Make sure there’s nothing in the Name field.

Now select Background Image from the Character section and use the same orange line image as before. Be sure to repeat the image horizontally.

See if that works.

Todd

> yes I can

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 7:47pm UTC](https://discourse.softpress.com/t/css-menu/15481/15 "2012-10-30T19:47:46Z")

</div>

No luck - Not showing now

[http://easthalldesign.com/dev1/](http://easthalldesign.com/dev1/)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Tim3](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/f14d63/32.png) [@Tim3](https://discourse.softpress.com/u/Tim3)\
**Post date:** [October 30, 2012, 7:58pm UTC](https://discourse.softpress.com/t/css-menu/15481/16 "2012-10-30T19:58:09Z")

</div>

Hi Justin,  
Try this;  
[http://www.freewayactions.com/test/vitality-fitness/](http://www.freewayactions.com/test/vitality-fitness/)

I don’t think you can so this using the CSS Menus Action by itself as it will normally want to apply the underline to the padded anchor rather than the span that you’ve got wrapped around the text. If you look at the source code of that page you should see the CSS overrides for the styles. Simply copy these into your Freeway page (Edit \> HTML Markup \> Before ) and you should be set.

Essentially what we are doing here is ignoring the image background on the anchor, padding the spans to the same height as the original underlines and then using a border-bottom to add the underlines back in.  
Regards,  
Tim.

On 30 Oct 2012, at 19:47, Justin Easthall wrote:

> No luck - Not showing now
> 
> [http://easthalldesign.com/dev1/](http://easthalldesign.com/dev1/)

* * *

[FreewayActions.com](http://FreewayActions.com) - Freeware and commercial Actions for Freeway Express & Pro - [http://www.freewayactions.com](http://www.freewayactions.com)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 8:20pm UTC](https://discourse.softpress.com/t/css-menu/15481/17 "2012-10-30T20:20:27Z")

</div>

BRILLIANT Tim worked a treat - if I want to keep it to highlight the page being viewed what would I need to add to the snippet

Thanks Todd/Erns appreciated the help too

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Tim3](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/t/f14d63/32.png) [@Tim3](https://discourse.softpress.com/u/Tim3)\
**Post date:** [October 30, 2012, 10:45pm UTC](https://discourse.softpress.com/t/css-menu/15481/18 "2012-10-30T22:45:15Z")

</div>

Hi Justin,  
Just add the fwCurrent class to the menu CSS style. See the updated example;  
[http://www.freewayactions.com/test/vitality-fitness/](http://www.freewayactions.com/test/vitality-fitness/)  
Regards,  
Tim.

On 30 Oct 2012, at 20:20, Justin Easthall wrote:

> BRILLIANT Tim worked a treat - if I want to keep it to highlight the page being viewed what would I need to add to the snippet

* * *

[FreewayStyle.com](http://FreewayStyle.com) - Free Freeway templates and parts to download, use and explore - [http://www.freewaystyle.com](http://www.freewaystyle.com)

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Justin\_Easthall](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/j/2acd7d/32.png) [@Justin\_Easthall](https://discourse.softpress.com/u/Justin_Easthall)\
**Post date:** [October 30, 2012, 10:48pm UTC](https://discourse.softpress.com/t/css-menu/15481/19 "2012-10-30T22:48:59Z")

</div>

wonderful thank you.

* * *

freewaytalk mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)