This is probably an easy problem to solve - for the header, I’m trying to create 4 states, each with different background colors:
Inactive - white/blank
Hover - light grey
Pressed - dark grey Active - Blue
Hover and pressed is just changing the style, and white/blank is the pre-set color. I’m struggling more with changing the color for when it’s active to blue.
I know there is a way to do this with custom states. I’ve tried creating a custom state active_page (text), however, I’m not sure how the logic would work for when the page loads. I’ve also tried doing conditions with “When page loads”, but I can’t seem to change the style of the current text.
Any examples out there I could check out to understand this better?
I would say “active” is the page that the user is currently navigating, and so is clickable.
So if the header has “Services”, “Portfolio” and “About Us”, and the user is on the Services page, the Services text background would turn blue and remain blue while the user is on that page. Once the user clicks and navigates into a different page, the Services page would go back to white, and the new navigation page would turn blue.
OK, so a “selected” state. So, the general way you might do that is have conditions on those header elements that detect the current page name and change their appearance based on that.
Reusable elements (like a header) have access to a property called “Current page name”. (Consider that a reusable element may appear on any page. How can the element know which page it is on? The answer is by examining this property.)
So, you put a condition – for example – on the “Services” element that detects if the current page is the “services” page by looking at the page’s name. That condition would look something like this (obviously, only you know what the name of your services page is, so this is just an example):
