- This topic has 11 replies, 3 voices, and was last updated 1 year, 9 months ago by
Fernando.
-
AuthorPosts
-
April 12, 2023 at 5:26 am #2607024
Jan
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,
JanApril 12, 2023 at 6:36 am #2607154David
StaffCustomer SupportHi there,
can your modal manage a CSS class instead of an ID ?
April 19, 2023 at 2:27 pm #2615269Jan
Hi David,
sorry for not getting back earlier.
According to the documentation, ids and classes seem to be supported.
Best,
JanApril 19, 2023 at 9:17 pm #2615383Fernando Customer Support
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/
April 21, 2023 at 2:52 am #2616645Jan
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,
JanApril 21, 2023 at 4:42 am #2616742David
StaffCustomer SupportThe 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 colorsApril 21, 2023 at 11:39 am #2617156Jan
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,
JanApril 23, 2023 at 4:55 am #2618317David
StaffCustomer SupportDid you find a solution ( by adding those to the Container ) ?
April 23, 2023 at 7:10 am #2618362Jan
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,
JanPS: 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.
April 23, 2023 at 7:29 pm #2618843Fernando Customer Support
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/
May 2, 2023 at 11:42 pm #2628562Jan
Hi Fernando,
many thanks for getting back. (a) did the trick.
Great support!
Best,
JanMay 3, 2023 at 12:14 am #2628592Fernando Customer Support
You’re welcome, Jan!
-
AuthorPosts
- You must be logged in to reply to this topic.