Header Border

Attach a class to the block. And then you can use CSS to style it. Do you know how to do those two things? If not, can explain.

The tools you expected to find are just not there in this theme. Some of the control we want on blocks is prevented by this new way of doing things, and there are also features that are disabled for end users by the theme maker. Hard to say which one prevents things from happening so far for me.

Anyway, for now, classes and CSS are the option. You could also probably work it out through the JSON file and customizing that. But make it easy and go with CSS through a plug in or a child theme.

• This reply was modified 2 years, 8 months ago by saturn3.

Hi @saturn3,

thankyou for getting back to me so quickly.

Could you please explain how to add the class and css style, as I have tried with no success.

Regards

Bob

You could also maybe create an empty area under what is now your header block list with maybe a group or section block that has a background color and a height. Maybe. But that is not what you asked for.

Thanks for your response once again, however as I wish to have a sticky header I do not think that this would work.

This is an awesome reference below. If it’s too much, I will be back later on to assist. Right now, there is no easy way to add custom CSS to Twenty Teeny Two, so go with a plugin. I use Site Origin CSS. Always back up your CSS code somewhere outside the plugin!

This will show you how to add a class to a block. Then control it with the CSS. You will not see the results in a page or template editor until you preview or serve the page to an end user.

https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

When it gets to:
Then, we can add this CSS to our site under Customize → Additional CSS

That is not something you can do right now. That is when you switch to the Site Origin plug in to insert your CSS.

I have a sticky header through CSS. I googled for code and played around with it to make it work.

Thanks @saturn3,

the link for css classes worked perfectly for me.

If you could let me have the css for sticky header I would much appreciate it.

Regards

Bob

header {
    position: sticky;
    top: 0;
    z-index: 99999997;
}

I am using a high Z-index to prevent things in the body from scrolling over my header.

Try it without if you wish!

Once again thankyou @saturn3,
I will give it a try later.

Regards
Bob

Hi @saturn3
I used your code for the sticky header and it’s working superb!
Thanks you for that!
Ram