So from the videos I’ve watched, the Pinegrow way to manage a nav bar is to make a master page and then on each page’s html use that master page template and then change the coloured/selected nav bar item (style it) to show that’s the page you’re on.
Just to confirm - have I understood that correctly?
If so, how, using the Pinegrow way of doing things, do I accomplish this effect:
Because unless I’m being really dumb (probably true) then doesn’t the concept of a master page and using that as a template and manually making the selections on each ‘sub’ page i.e. contacts, products, services etc. break the whole design and implementation of what I want to achieve or even any attempt to animate between states?
Are you talking about styling the current page link differently? Lots of ways to do it.
Using Kevin Powells codepen from his video. (you are jumping in the deep end here, maybe start with more basic stuff) , and making the About link the current page by adding .active, you can easily have it ignored.
You can do this with Master page. I usually use Javascript to get any current page links, and the add a class. Say I used .active. In this scenario I modified Kevin CSS selectors with :not(.active) (beyond the scope of this reply)
And the .active class just has the pointer disabled and an opacity applied.
Well, i have to admit, I had to read both the OP’s question AND the reply … a few times.
Challenging!
So ill be quiet .. but I did notice that if I fire this up in PG, then the visual interface displays the mouse over differently depending on whether the Test Clicks icon is activated.
im not sure if this is anticipated behaviour.
heres a looksy.
Its a little difficult to see here as the animated gif had to be reduced in size to be below 10MB to upload.
but WITHOUT test clicks enabled, the moving transparent background is square, no styling,
WITH test clicks enabled, the transparent selector IS styled, round corners etc.
is this a PG Feature or to be expected for some reason?
as the links arent actually clicked, so not activated, but the :hover effect displays differently, based on test clicks icon modality.
in hindsight……. yeah, the behaviour does make sense i guess.
as with clicks enabled…. id expect it to behave as expected when clicked…..
so I guess
It styling due to hovering over, is akin to that as in,
:hover is a pseudo class/state of click action so yeah, …. Its probably the correct behaviour and I was
over/under thinking it
I don’t seem to have made myself very clear here have I, especially as two people have deleted multiple messages.
Sorry.
Let me try and rephrase the question.
In my (limited) experience making a website, I’m used to either having a dedicated ‘nav bar’ component that I can change colours and stuff and the animation between states i.e. hover, selected etc is handled simply by the nav bar component itself.
Pinegrow has confused me further (having come from iWeb, Blocs, Sitely and Elements) in that rather than having a single nav bar component and an option to ‘make the header appear on all pages’, I now have to create a ‘master’ page and use that master page as a new template for each new page on my site and then manually change the menu so that the ‘active’ link is correct for the page I’m on - rather than every other web tool doing that for me based upon which page is currently being displayed.
Because of this more basic/manual way of doing things in PG, and having to use a “master” page as a template for every other page, how do I make that work with the html/css I need to make the menu work like in the video I attached?
Do I have to make the code work on the master page and then for every new website page I add, I have to manually change which of the menu items is the ‘active’ one and hope the rest just works or do I somehow make this new nav bar thingy it’s own component and add that to the master page?
