[Resolved] GB/GP Button Icon Fixed Position

Home Forums Support [Resolved] GB/GP Button Icon Fixed Position

Home Forums Support GB/GP Button Icon Fixed Position

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1608547
    Vlidi

    Dear GP team, happy holidays and thank you for all the great stuff!

    I am trying to redo the old Bootstrap site using the GP framework, and have a question re: the GenerateBlocks button style. I want to replace the old “ribbons” used for navigation with GB buttons, and succeeded most of the way.

    Now I need help with the following:

    – how to make the button text left aligned, and the (custom) icon aligned in the fixed position all the way to the right?

    Hopefully the things like this will be a breeze in GB Pro (can’t wait!).
    I made the test page (URL below) displaying the old “ribbon” image, it is how it should look, and below is the button I created that needs to be adjusted.

    Thanks!

    #1608788
    Elvin
    Staff
    Customer Support

    Hi,

    Do you want it applied to all the GB Button blocks on your site? If so, add this CSS:

    span.gb-button-text {
        margin-right: auto;
    }

    If you want to add it on specific button blocks, add a CSS class on the button’s Advanced setting and add it into the CSS selector.

    Example: Styling a GB Button block with “custom-btn” class.

    .custom-btn span.gb-button-text {
        margin-right: auto;
    }

    Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

    A wise man once said:
    "Have you cleared your cache?"

    #1608843
    Vlidi

    Thanks Elvin, it works!

    For whoever may need this, to match the original design I added the text-align: left; for the screen sizes that will break the longer text into two lines.

    Thank you once again for the great support.

    #1608881
    Elvin
    Staff
    Customer Support

    For whoever may need this, to match the original design I added the text-align: left; for the screen sizes that will break the longer text into two lines.

    Thank you for sharing. πŸ™‚

    No problem. Glad to be of any help. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1610038
    Vlidi

    Hey Elvin, yes, maybe it’s my English, but the text stayed center aligned.
    This gets noticed only when the line breaks on the smaller viewports, so align-left completes the solution.

    Thanks for the great support, resolved!

    #1610167
    Elvin
    Staff
    Customer Support

    Nice one. Good job in sorting it out.

    Please feel free to open a new topic if you need help in anything else.

    Cheers. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

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