Archived topic
GenerateBlocks Pro / Custom attribute / header
11 replies · Started by Jan on April 12, 2023
Hi there,
we are using Custom Attributes to display a modal at the click of a button. While this is working just fine with buttons located in the main section of a page, we would like to use the same feature when clicking on a header element also.
In order to achieve that, we need to link the Custom attribute data-hystmodal with value #myModalKontakt to menu-item-900.
Any advice is much appreciated.
Best,
Jan
Hi there,
can your modal manage a CSS class instead of an ID ?
Hi David,
sorry for not getting back earlier.
According to the documentation, ids and classes seem to be supported.
Best,
Jan
Hi Jan,
One option is to add that Menu Item through a GB Button in a GPP Block Element - Hook hooked to menu_bar_items. Then, set the custom attribute and class to this button.
For further assistance with regards to GB Pro, kindly raise a topic here instead: https://generate.support/
Hi Fernando,
the GB Button option this works very well. Thanks.
Do I still need to style the header button with additional CSS?
I was hoping styles added in the Elements block will be displayed in the header navigation also. Apparently they are not (see Link to relevant Page / Kontakt-Link in the header navigation)
Please kindly advise.
Thanks,
Jan
The Menu Bar has some very specific CSS that sets the <a> tags to inherit colors from.
So, edit the element and place the button inside a GB Container Block.
Select the Container Block, and set its Link and Link Hover colors to the colors you want in your button.
Now the Buttons <a> will inherit those colors
Hi David,
wow, wrapping a container around the button is quite a hack which I would have never figured out myself.
The button background color inkl. hover-effect is now visible. Padding and border radius is not.
Is there another smart hack for that also?
Thanks,
Jan
Did you find a solution ( by adding those to the Container ) ?
Hi David,
you may have seen the screenshot linked to my previous answer. Yes, I created a container which holds all the desired styles (background color, border radius etc), however, not all of which appear in the preview of the page.
Kindly advise.
Thanks,
Jan
PS: My apologies for not removing the CSS which I added as a work around. The relevant page linked below does show the button as is now.
Paddings and Border-radius should work on the Container Block. To clarify have you added them to the Container?
If so, can you try a), and if that doesn't work, try b) here?:
a) Choose Inline Embedding for the CSS Print Method in Settings > GenerateBlocks.
b) Regenerate your CSS files in Settings > GenerateBlocks.
Reference: https://docs.generateblocks.com/article/unstyled-content/
Hi Fernando,
many thanks for getting back. (a) did the trick.
Great support!
Best,
Jan
You're welcome, Jan!
