Page Menu Item not Showing "Current" When Page is Accessed Via Page/SectionID Link

Hello,

I’m not sure you can help me because I can’t get links to pages/sectionIDs to work while in development mode (“page not found” errors) - although they work fine in my published website - but I thought I would try…

I have more than one scenario of the following and they all behave consistently: I have a page that I link to from the main menu. Accessing this page via the menu works fine and when accessed, the menu shows the current page as “current” (i.e., the menu item has a dark blue background). I also link to a section on this page via a link on the home page. Linking to the designated section on this page works fine - however the menu item for the current page doesn’t show as “current” - i.e., the dark blue background doesn’t display.

So, my problem is that when a page is accessed via a link to that page/sectionID, the menu item for that page doesn’t display the “current” attributes.

My published website: www.LeakProfessionals.com

Specific example:
~ Select the “Your Leak” menu item: this displays the pool-repair-leak-questions-bucket-test.html page and the “Your Leak” menu item now has a dark blue background.
~ Go back to the home page; select the “Think your Swimming Pool is leaking? We can help!” link in the hero section. This displays the same pool-repair-leak-questions-bucket-test.html page, taking you directly to the Your Swimming Pool Leak section.

The only problem is that this time the “Your Leak” menu item does not have the dark blue background even though that page is the current page.

Here is my public share link: https://preview.webflow.com/preview/leak-professionals?preview=3a0c1aa47588ac0ee791b2e3a3a39be3

I appreciate any help you can provide!

Just wanted to see if anyone has any ideas about this…?

Hello @LPWebDes, sorry for the late reply :confused:

I think your problem could be in the using capital letters in the elements ID.

Different Servers handle capitalization differently
If your website is on a Windows server, then www.example.com/about will be handled exactly the same as www.example.com/About. The Windows server is case insensitive. If your website is hosted on Linux, then those two addresses will be seen as two different pages. That means that one will return the correct page, and the other will return a dead 404 page not found. So, if you originally host on a Windows server and move to a Linux server, you could be in for mass confusion and a lot of page errors for your users. Further, if you use capital letters for your URLs on a Linux server, users will get a dead page if they attempt to use all lowercase letters to access a page.

Hope I was able to explain.

Regards,
Anna

Thanks so much for the info, Anna!

You have definitely helped me learn some things - and things I didn’t even know to ask about! And I will be changing the uppercase letters to lowercase. :slight_smile:

But, putting any “page not found” errors aside…I still have the scenario where the menu item doesn’t show its “current” attribute(s) when the page is accessed via a link on another page; the page does display correctly - it’s just that the when the page is accessed via a link on a different page (instead of being accessed via the menu) the visual attributes of the menu item that represent the “current” page are not displayed. In my site, the “current” page’s menu item has a dark blue background with white letters. If you access the page via the menu, that page’s menu item shows with a dark blue background and white letters; if, however, you access the page via a link from another page, the page’s menu item doesn’t show as “current,” i.e., it shows the “non-current” attributes of a white background with dark blue letters. I hope that makes sense! (It’s a small, visual-only issue, but I would like to fix it if possible!)

Oookkk… I think I understood you. It is really weird

Let’s try to remove .html from links:

Example:
/pool-repair-leak-questions-bucket-test.html#your-swimming-pool-leak-section
would become
/pool-repair-leak-questions-bucket-test#your-swimming-pool-leak-section

Thanks for the suggestion! I did remove the .html (in that specific example you gave), but the result is the same: the menu item for the pool-repair-leak-questions-bucket-test page does not display its “current” attributes when accessed via the link from the home page.

It acts like whatever code is run when a page’s menu item is selected is not being run when that page is accessed via a link from another page - but I don’t know enough to know what that really means or how to fix it!

Hi @LPWebDes, I took a quick peek at the site, and the next thing I would check, is to remove the Transitions All styling on the Navigation Link class, I think that is interfering with the current class on the navbar, see my screenshot:

Here is how to change:

I would check that next and if still an issue, let me know.

Hello, @cyberdave -

Thank you for the suggestion! (FYI: Your video of how to remove the Transition was very helpful!) I removed the Transition, but unfortunately, that didn’t change anything! Any other suggestions?

Anyone have any other ideas…??

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.