Menu with editable classes, components and master page always overwrites the active class

I have the following, very common problem:

In PG you can create a header menu with menu links as a master page or component which you can use on any site of your website. You can create an .active class and make the menu links editable so that you can only change this class on any site (alway highlight the site you are visiting at the moment).

I can do this with a master page or a component, everything works fine. But when I use a component inside a master page, updating the whole project always overrides the active classes so it will restore the status of the master page.

That problem is also defined in this video (min 14): Using Master pages in a multi-page project - Tutorial - YouTube

The solution here is to tell PG to make the outer element editable and define to change just the component you want to edit. But then PG accepts every change I do to the header on any page which I don’t want (the header should look the same everywhere except the active menu links). I would like to use a component inside a master page because I can use components also in other projects.

Is there an even better way to achieve this simple task? Would it be a solution if PG would treat a component inside a master page like a normal component regarding editable areas?

Hi @Riccarcharias,
I’m not completely sure I understand the problem. I think you are describing a problem where the Pinegrow master page rules are over-ruling a set of component rules? These rules work almost like a CSS cascade, so typically a Master rule will be ranked higher than a component rule. I would have to see your implementation to give the best solution. Could you zip up your project and send it to support at Then I can take a more detailed look.
Sorry and thanks,

1 Like

Exactly, the master page overrides the editable areas in components. I can tell PG to leave the components I want to edit as they are, but then I can make any change on then (not just the .active class) so I could accidentally rename or delete something which doesn’t come back by updating the whole project.

Wouldn’t it make sense if the master page would notice the editable areas and leaf them editable?

I’ll send a project to the support. Thank you!

Hi @Riccarcharias,
Sometimes working with Master pages and components gets a little…cranky, for lack of a better word. Maybe it is something we can further improve in the future.
So, as to your problem. Again, Pinegrow has a certain hierarchy of rules when it comes to components and master pages. When adding a component to a Master page, you need to have a wrapper around the component that you can set to editable - and then limit it to the component, as shown in the video. Most times this isn’t an issue. This isn’t that great a solution when you have something with semantic value like a <header>.
My only work around would be to take off the component action of the header for the Master page and redo the editable sections. The header element would still be available as a component for other pages and you can perform any edits on the header brought in from the master page. Any other components on the page should be able to be wrapped in an outer div on the master to allow editing of the content within.

1 Like