[SOLVED] WayFinder won't display "over" state of navigation.

102 Posts

viltnieks Reply #1, 15 years, 11 months ago

Hello,

I’m trying to add "active section" state in my navigation. I’ve found some information in this topic: http://modxcms.com/forums/index.php/topic,30032.msg182310.html#msg182310

I’m calling WayFider liike this :

[!Wayfinder? &startId=`0`  &level=`1` &hereClass=`over` !]

I have .over class in css:

#nav ul li a.over{
	text-decoration:none;
	background: url(../images/nav_bg_hover.jpg) repeat-x;
	color:#87fe77;}

I’ve tried some variations of css like:

.over {}
a.over {}

http://jelgavasautoskola.lv/ - site

But with no luck.

1,024 Posts

Frank Reply #2, 15 years, 11 months ago

try this

#nav ul li .over a{
	 text-decoration:none;
	 background: url(../images/nav_bg_hover.jpg) repeat-x;
	 color:#87fe77;}

Not sure, just try if you want.

102 Posts

viltnieks Reply #3, 15 years, 11 months ago

Thank you, but it didn’t seem to work sad

1,024 Posts

Frank Reply #4, 15 years, 11 months ago

I normally use the .active class, without setting that up in the wayfinder call, and that works.
So maybe just like this in your css:

#nav ul li .active a{
	 text-decoration:none;
	 background: url(../images/nav_bg_hover.jpg) repeat-x;
	 color:#87fe77;}

It must however come after your hover class. Not sure what you mean by .over?

Read here.

102 Posts

viltnieks Reply #5, 15 years, 11 months ago

I want to have 3 states:

normal
hover - when you mose over an <li> item
over - <li> item is highlited when you’re in that particular document (page)

normal and hover are working great, but I’m having troble with over state

For instance: When I’m in section "home" I want "home" highlighted differently so I made .over class for it

css:

#nav{
	text-align:center;
	font-size:12px;
	padding-left:15px;
	font-weight:bold;
	margin:0 auto;
	background:url(../images/nav_bg.jpg);
	width:925px; height:49px;}
	
#nav ul{
	list-style: none;}	
	
#nav ul li{
	display: inline;}	

#nav ul li a{
	float: left;
	display: block;
	padding: 18px 15px 0 15px;
	height: 31px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;}
	
#nav ul li a:hover{
	text-decoration:none;
	background: url(../images/nav_bg_hover.jpg) repeat-x;
	color:#87fe77;}
	
#nav ul li a.over{
	 text-decoration:none;
	 background: url(../images/nav_bg_hover.jpg) repeat-x;
	 color:#87fe77;}

It’s working in static html:
I jaust added .over to <li> like this:

<li><a href="about.html">About</a></li>
<li class="over"><a href="home.html">Home</a></>

1,024 Posts

Frank Reply #6, 15 years, 11 months ago

Okay I just tested on this page.
Current page (or active page) is orange. Not for the dropdowns, just did this for the test.

I used this CSS and nothing special in the wayfinder call:

.menu ul li:hover a {background: #a4b0a2;	border: 1px solid #a4b0a3;	background-image: url(../../images/navbg.gif);}
/* specific to non IE browsers */

.menu ul li.active a {color: orange;border: 1px solid #a4b0a3;	background-image: url(../../images/navbg.gif);}
.menu ul li:hover ul {display:block; position:absolute; top:28px; left:0; width:104px;}
.menu ul li:hover ul li a.hide {background:#a4b0a2;color: #fff;background-image: url(../../images/navbg.gif);}
.menu ul li:hover ul li:hover a.hide {background: #a4b0a2;color: #fff}

Wayfinder call as said, nothing special...

102 Posts

viltnieks Reply #7, 15 years, 11 months ago

Thanks!

I changed my css from:

#nav ul li a:hover{
text-decoration:none;
background: url(../images/nav_bg_hover.jpg) repeat-x;
color:#87fe77;}

#nav ul li.active a{
text-decoration:none;
background: url(../images/nav_bg_hover.jpg) repeat-x;
color:#87fe77;}

to:

[b]#nav ul li:hover a[/b]{
	text-decoration:none;
	background: url(../images/nav_bg_hover.jpg) repeat-x;
	color:#87fe77;}
	
#nav ul li.active a{
	 text-decoration:none;
	 background: url(../images/nav_bg_hover.jpg) repeat-x;
	 color:#87fe77;}

And it works now

But isn’t this the correct format

ul li a:hover
ul li a.active

1,024 Posts

Frank Reply #8, 15 years, 11 months ago

ul li a:hover
ul li a:active

But your (mine too) solution is assigning a class .active

Maybe someone can enlighten us in the excact differences. And also why wayfinder does not react to the here or self class.

102 Posts

viltnieks Reply #9, 15 years, 11 months ago

I guess I can live without knowing it

I will just use your method.

Thank you again wink

1,024 Posts

Frank Reply #10, 15 years, 11 months ago

I cant live without that to be honest, will be posting back here

Good it s working anyway!