I’m doing a minimal two-page site and have a link in the top right header that leads to the second page. I’d like style the the link differently when I’m on that actual page – might hide it, might gray it out – but can’t figure out how to go about it. Is this possible in vanilla Blocs or do I need to do some js wonkery?
Since I’m only using two pages I might as well just not use a header and repeat the header/topnav inside the body of the two pages and solve it that way, but it’s not elegant and doesn’t scale, so I’d rather find a solution.
Any pointers appreciated!
Ok, for a change in nav link style/colour for different pages.
example: you have 2 pages named, Page1, Page2,
Ok, to change the colours of the nav links, you need to go to project settings, then typography. Under object dropdown, select navigation link then style as you need. example change colour to red. All pages will now have this set for the link colour.
A class will also have been created for this called navbar-nav li a in the class manager.
On page two, click the page settings, and under the body classes field, type page2.
Now in the class manager create a new class and call it page2 .navbar-nav li a (at the prompt about keeping the spaces in class name, say NO, keep spaces intact.)
Now edit this class and change the colour of the typography to green.
Page 1 should show red nav link and page 2 will show green.
This was a quick example, so i would recommend probably naming the classes more relevant to you.
p.s. you wont see the changes on the design canvas, you will have to preview to see the colour changes
Thanks for the walkthrough – appreciate it. I might now have explained myself well enough I think.
I’d like the “about” link to either disappear or no longer function as a link on the “about” page, but I can’t seem to get the hang of it;
If I go into >project settings and set a style for Object>Nav link, and then follow your instructions I could do a seperate class and for example set opacity to 0 or position the link offscreen or something – is that how you would solve it?
Ok, lets say for example that you kept my example above and have a class called navbar-nav li a and one called page2 .navbar-nav li a.
Create a new class called link-opacity and then go the misc tab of the class and set the opacity to 1.
Now create a second class called page2 .link-opacity and set the opacity to 0.
Use the layertree, to select the list item of the nav item you want to disappear, (if you don’t do it this way, it will make the whole nav disappear, we just want one link to disappear)
Once selected, then add the class link-opacity to that item.
That should work because you still have page 2 body class set to page2.
If you just want to have this scenario and not the colour styling as above post then basically, do everything that i have mentioned in this post but also, goto page settings for page 2 and enter page2 in the bodyclass field.
This basically means, to apply the settings of link-opacity class to all items across the project that have this class, but because we have a body class on page2 set, it will then over ride those settings with any classes that have page2 at start. example page2 .link-opacity.
hi, just had a really quick look at your question well sat in the car waiting for someone if it’s only two page website Then don’t bother using the global areas and just create the pages you want it?
Just read your comment that it does not scale properly? Seems a little bit of design it should work perfectly good luck!