More menu woes!

Can somebody please just point me in the right direction. I must have spent 3 days trying to get this menu working as I want it with little or no success.

I have the active page link called .page-active (clever, eh?) and it’s only partially working. When you’re on the specified page, I would like the menu item to show as white and bold, which is set up within the class manager. Just to test, I put an underline in, and this part works but not the font or colour - they just stay as the not-active page.

I see from he inspector (screenshot below), that there is a class in there called ltc-2440, which I haven’t a clue about or how it came to be there. Also, no active page settings are showing on the Contact page menu item.

Completely at a frustrated standstill here.

No idea really. I noticed though, that your menu items (the an element) has a class of nav-link and a class of menu-rollover added, that both try to apply the same attributes. Why the menu-rollover class?

And there’s another mystery! I can remember doing the menu-rollover class, but not the other one!
But that’s probably more my memory than anything else.

A classic answer but have you watched @Eldar’s video about active page link :thinking:? I recall it being a little trick. :grin:

2 Likes

Cheers @Jerry. I had, but I neglected the part about re-ordering the classes. So that part is done and all seems fine now locally. I shall upload it and cross my fingers that all is ok. :+1:t3: :crossed_fingers:t3:

2 Likes

I had the same problem. I used the active-page class to make the active page appear in bold and with a halo. The problem I encountered was that all the attributes no longer appeared on my pages (bold didn’t work). Norm has just got back to me and said that I should create a class called « .active-page-link » and not « .active-page » . Now everything works fine with this correction. Perhaps you have a similar problem?

Norm will communicate the following: “I’m going to add a fallback to prevent this class from being used in the future, so that it doesn’t affect others.”

1 Like

Cheers @Pat.
That’s strange given that you get an opportunity to actually call the active page link whatever you want!
It’s little things like this that confuse the yell out of me.
It seems that ‘when you’re in the know - you know!’
I think I have the menu sorted now be following @Eldar s video, but this really should be a lot simpler.

1 Like

I always do it this way. Simple and quick

1 Like

That’s the trick really. CSS not only cascades but there is specificity also.

Some have more weight than others and the browser will apply those to the element.

1 Like

Thanks Pete. At some point over the next few days I’m going to be putting a dummy site together, just for my own practice, and use your instructions above - to see if I can get the menu ‘foolproof’.

1 Like