[Resolved] GenerateBlocks Pro / Custom attribute / header

Home Forums Support [Resolved] GenerateBlocks Pro / Custom attribute / header

Home Forums Support GenerateBlocks Pro / Custom attribute / header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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,
    Jan

    #2607154
    David
    Staff
    Customer Support

    Hi there,

    can your modal manage a CSS class instead of an ID ?

    #2615269
    Jan

    Hi David,

    sorry for not getting back earlier.

    According to the documentation, ids and classes seem to be supported.

    Best,
    Jan

    #2615383
    Fernando
    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/

    #2616645
    Jan

    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

    #2616742
    David
    Staff
    Customer Support

    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

    #2617156
    Jan

    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

    #2618317
    David
    Staff
    Customer Support

    Did you find a solution ( by adding those to the Container ) ?

    #2618362
    Jan

    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.

    #2618843
    Fernando
    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/

    #2628562
    Jan

    Hi Fernando,

    many thanks for getting back. (a) did the trick.

    Great support!

    Best,
    Jan

    #2628592
    Fernando
    Customer Support

    You’re welcome, Jan!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.