Nov 10, 2019
Back to all Elements
Using JavaScript I created a code that takes only the last part of the URL, and injects it to an element in the page.
The code basically creates 2 variables:
Then the code changes the element with the class name '.page-name' to one of the variables, depending on the result of the check we did on the 2nd variable.
Add the code to your site's custom code section before </body> tag, so the code will load on all the pages.
<script>
var currentPage = window.location.pathname.substr(1).split("/").pop();
var lngth = currentPage.length;
$(document).ready(function() {
if (lngth === 0) {
document.querySelector('.page-name').textContent = "Home";
} else document.querySelector('.page-name').textContent = currentPage;
});
</script>
Now only thing left is to add a txt element (H1-H6, paragraph, txt, span, Link, Rich Text, Quote) on any page with the classname of 'page-name'.
.png)
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
Convert the Workspaces dropdown to an open sidebar with custom order.
A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.
.png)
Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.
.png)
