Archived topic
Social Icon menu issue with GB
8 replies · Started by Halil on November 10, 2021
Hi,
I have created social icons menu with GB buttons in a page. And then I copied its html code to a header via block widget.
Color, spacing, etc are not respected in the header but they look fine in the page.
What should I do ?
Hi Halil,
It doesn't work that way, GB won't generate CSS for those HTML.
You can try using a block element instead：
1. Select thebuttons block in the page, click on the 3 dots of the tool bar, click copy:
https://www.screencast.com/t/QfojOxwxnUi
2. Go to appearance > elements, create a new block element, paste it to the content filed.
3. SetEntire site as location, select hookas element type, choose after_header_content as hook name:
https://www.screencast.com/t/ycBw7euLTqs
Then it should keep the same style as the page.
Let me know if this helps :)
almost done Ying!
Icons now respect settings but the icon block shows just next to logo, I want it right aligned in the header.
I tried different settings like "after logo" etc but didnt work. Also right aligned buttons in button block.
What am I missing?
Can you try add this CSS:
.inside-header.grid-container {
justify-content: space-between;
}And it seems there's an empty paragraph block under the buttonsblock in the element, try delete that block.
best support ever! thanks a lot Ying!
Great! You are very welcome Halil :)
Sorry for opening up the same thing,
I checked dont show on mobile option while creating the buttons, so it doesnt appear on mobile menu.
however on tablet size, social icon buttons look vertical, instead of horizantal.
Do I need to check some options in button container or css code is needed?
If it requires css, could you pls help me with that?
nevermind, I found the options in block editor. Thanks.
Glad you figured it out :)
