Nav links using the 'Active' property doesn't hold

Wappler General How To
#1

I have a left-hand menu bar that works fine with my SPA pages. The issue I have is with regard to :hover, :focus, :active etc. The menu changes to a paler colour on hover and to a darker colour when selected. As soon as you click on anything within the content part of the page the menu nav bar loses the coloured selection (all goes back to base colour). Can any give me a clue as to what I can do to sort this out?

image
image.png700×450 25.6 KB

image
image.png700×450 24.8 KB

#2

Hi @UKRiggers
Are you assigning somehow an active class to your menu, when clicked? Also is it loading a specific URL?

#3

The CSS is as follows

.nav-link:visited, .nav-link:focus {
text-decoration: none;
background-color: #005eab;
}
.nav-link:hover {
text-decoration: none;
background-color: #229bff;
}

and the Nav Link Properties

image

image
image.png1051×220 9.76 KB

#4

I don’t see any reference to the .active class in your stylesheet, only the :hover/:focus pseudo classes.
Also you don’t need the .active class there by default, the nav script will place it there, when the URL matches the href.

#5

Sorry, I’ve been moving things around and trying allsorts. This is how it is now.

image

I wondered what the ‘Active’ checkbox did in the Nav Link Properties? I have removed all instances of the active class. The behaviour is the same.

The menu bar was created by myself quite some time ago and not Wappler generated.

#6

You need to style the active class.
Classes in CSS should be defined as:

.active {}
1 Like
#7

BRILLIANT! Simple. Thank you :smile:

I should have twigged that.

1 Like