Archived topic
GB/GP Button Icon Fixed Position
5 replies · Started by Vlidi on January 6, 2021
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!
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/
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.
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. :D
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!
Nice one. Good job in sorting it out.
Please feel free to open a new topic if you need help in anything else.
Cheers. :D
