Archived topic
Building a Header with GB
5 replies · Started by Erika on January 18, 2022
Hi there,
earlier we used the GP header and I added Phone, Mail, etc. with a code as a widget. It was a bit out-of-date now and the Element - Headrer seemed also out-of-date since we have GB where I can build this header very fast without any code, so I re-created the header with GB:
1) I created the header as a block element
2) I set element-type to Header
3) display rules whole site
Works nice so far.
However I have two things I do not know how to solve:
1) I would like the "title" of the site right near the logo on the left, no space between. But I can only set the width of the container in %, so how do I do that? Actually the first container with the logo would need to be the size of the logo. Any option without using a class and css?
2) The button on the left had a very specific css and uses svg. How can I create the same button here? Can I add the svg to the button? I tried to apply the same class, but do not really get what I what. Probably the css stays pretty much the same, but I do not figure out how to apply it to a GB button.
I also added the button svg as icon, but then the button is very "high"... however probably that would be a way...
Thanks, Erika
Hi there,
1. below the container %s you will see Flex options: Grow Shrink Basis.
Select the container with the logo and set the basis to the PX dimensions you want the logo to be eg. 100px.
Then select the second grid and set the Grow to 1 - this will let that column fill any available space which will push the 3rd column to the right.
2. That button - it may be simplest to add a HTML block and copy over your HTML so it preserves the CSS it requires... i recall that being a little tricky.
Hi David,
good on the flex attributes :) Thanks.
On the button: still html, but it works. I thought there might be a "without-code"-solution using a svg icon, but let´s be lazy on this today ;)
Thanks, Erika
The second column try:
grow: 1
shrink: 1
basis: 0
Hi David,
setting the 3rd column to 200px solved it.
Thank you!
Erika
Glad to hear that
