WP-Theme: Twenty Twenty-Three with child theme for modifications.

i would like to build a navigation that looks like this: enter image description here for this i used the Navigation-block with Custom Link Blocks and with the help of some additional css i got this fare: enter image description here

my Additional CSS (added via the Editor - Styles ADDITIONAL CSS

/* site navigation */
.wp-block-navigation .wp-block-navigation-item {
    align-items: center;
    display: flex;
    position: relative;
    flex-grow: 1;

.wp-block-navigation .wp-block-navigation-item__content {
    display: block;
    margin: auto;
    text-align: center;

.wp-block-navigation-item__label s {
    font-size: 0.5em;
    text-decoration: none;

(the small second line in the buttons is currently done via a hacked use of the Strikethrough element inline style..)

currently the Navigation-block supports a background color. and the Custom Link Block does not.

as the user wants to change the order / count & colors some-times i would like to make this editable in the ui.

what is the easiest way to add the normal block background-color setting option to the Custom-Link Block?

i have read that it is possible in custom blocks to add these via the block supports would it be the easiest way to extend teh Custom-Link Block (=create a new block with this additional feature) ?

anyone other ideas / easier ways to archive my goal..?

one additional tricky part is the line-height / positioning with the second lines....

1 Answer 1


i resolved this by using the Columns Block. this was the fastes and easiest way to implement this. its not perfect as the semantically correct way would be the nav element...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.