Removing .HTML removes "Current" State in Navigation

Hello all,

I’ve currently got a portfolio website made here on Webflow that I like to export out to my personal domain name. I’ve opted to remove the “.HTML” from my URL and force users to my HTTPS domain with my .HTACCESS file. I noticed recently that it disables my “Current” state in my navigation, which I feel is important for users on my website.
I’ll take any help I can get!

Domain URL: https://matteoliver.com/
Webflow URL: http://matthewoliver.webflow.io/

Here is my current .htaccess file code:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*).html$ /$1 [L,R=301]

ErrorDocument 400 /error.php
ErrorDocument 401 /error.php
ErrorDocument 403 /error.php
ErrorDocument 404 /error.php
ErrorDocument 500 /error.php

I host a few Webflow generated sites with Netlify and had the same issue. I couldn’t find an elegant way around it so had to write a custom script to change all the hrefs within the page. I have this in the body code globally.

<script>
var links = document.querySelectorAll('a');
links.forEach(function (link) {
    var existingHref = link.href;
    if (existingHref.includes('index.html')) {
        var newHref = existingHref.substring(0, existingHref.lastIndexOf('/'));
        link.href = newHref;
    } else if (existingHref.includes('.html')) {
        var newHref = existingHref.substring(0, existingHref.lastIndexOf('.'));
        link.href = newHref;
    }
});
</script>
1 Like

Jason, thank you for the quick reply. Now I would imagine I’d have to remove my .htaccess file for this to work? Or that should not matter. I just wouldn’t want these two to conflict with each other.

I’ll play around with it.

I don’t think it would make much difference, but I’m not 100% sure so you would need to test it. The script above alters the href values for all the links on the page and removes any .html that it finds.

1 Like

Jason, your solution worked with removing the .html, but the post found here solved my specific issue with the css class “.w–current” within my navigation bar:

I appreciate you.

1 Like

This solution remove text-align: left from mobile menu on current state.
If you have align left items on mobile menu, current one will be text-align center.
I’m looking for best solution still. I will test jasondark way now.