Archived topic
Four widgets in header: 2 on one line, 2 on the next
14 replies · Started by Giselle on December 9, 2021
Hi,
I'm trying to align four widgets in the header section. I need two widgets next to each other, and then another two underneath, all right-aligned (with the logo on the left)
I used this CSS from your forum to have the two widgets in each set on the same line:
.header-widget {
display: flex;
align-items: center;
}
Is there a way to break the second set onto a new line?
I've also tried adding 2 widgets to the top bar, but this throws out my alignment (logo on left).
- I also tried doing this and then adding a negative margin to the site-header, but I don't think this is a great solution in terms of mobile design.
- I also tried absoutely positioning the top bar, but as it's not contained within the site-header so I can't make it relative to that.
Thanks for your help.
All best,
Giselle
Hi there,
can i see the site with the widgets in place?
Hi David,
Yes. Currently with one set in the top bar with a bg colour. I'll add the link below.
Thanks,
Giselle
As you're using the Block Widgets, i would suggest using GenerateBlocks Grid Block in the first widget, then you can create a 4 item grid, each of which are 50% wide forming your two rows of 2 columns.
You will want to add them via the Dashboard > Appearance > Widgets so you have all the sidebar settings.
Hi David,
Thank you! I'll try that now.
Giselle :-)
Hi David,
That worked. I hadn't thought about using the grids in a widget - very useful!
My remaining question is about the width of the grid. I've set the column gap to 0, but there's a space in the right-hand column.
Thanks,
Giselle
Do you have a mockup image of how exactly they should be laid out ? Then i can advise on where to adjust what.
Hi David,
I don't.
I'd like the grid aligned to the left of the header, with no default column spacing (I can them adjust it).
If you add a bg color to the left-hand column, you can see there's a space to the right of the content. Let me know if you need a mockup and I'll send this later today.
Thanks,
Giselle
Ok when you select a Grid item, and you set its width to 50%, below those options are the Flex fields: Grow | Shrink | Basis.
For the left hand columns in the Grow field add: 1
For the right hand columns do: Grow: 0 Shrink: 0 Basis: 150px
You may need to adjust the 150px but this is effectively telling the grid "i would like to be 150px wide, if i can"
Hi David,
When I set the flex-basis to 150 the column alignment gets thrown out.
I noticed that if I duplicate a container, it has the same class: gb-grid-column-2348eb43 Not sure if this is relevant? The last three containers are sharing the same class.
I've created a screenshot. URL below.
Thanks,
Giselle
Thats weird - how did you duplicate them? Is it by clicking the + icon in the toolbar ?
Setting the basis to around 180px should work.
Hi David,
I clicked 'duplicate' on a container within the grid. This was probably causing the alignment error. Now corrected.
For the left hand columns shrink is set to 0 (and grow to 1) - checking this is right, but I've tried both ways and it doens't make a difference.
I've added 180, but the gap remains. If I change it to a smaller number, the content wraps, but the gap doesn't decrease.
Thanks,
Giselle
May need to resort to a little CSS to limit the width of the header widget:
.header-widget {
max-width: 400px;
}tweak the 400px to suit.
Thanks, David, that's great. Thanks for all the help!
Giselle :-)
You're welcome
