[Resolved] Navigation Block CSS styling

[Stefanie]

Hi there,

I refer to this post and raise a new topic for this.

I have created an element for the left sidebar. Inside it is the WP navigation block (URL is in private field)

I would like to make the nav-items look like buttons, but this is only partially successful.
This is my css so far:

.button-menu .wp-block-navigation-item__content {
	background-color: var(--base);
	padding: .4em 1.6em;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
        color: var(--contrast);
}
.button-menu .wp-block-navigation-item__content:hover {
	background-color: var(--contrast-3);
	color: var(--base);
}

But there are two problems left:

1. I am looking for a way to highlight the active/current link in the navigation block with color.
2. I would like to make all buttons the same width and have tried flex:1; but to no avail.

Can you help?

Many many thanks!

[Ying]

Hi Stefanie,

1. Try this CSS:

.sidebar li.wp-block-navigation-item.current-menu-item a {
    color: red;
    background-color: yellow;
}

2. Try this CSS:

.sidebar .wp-block-navigation ul {
    flex-direction: column;
}
.wp-block-navigation ul li,.wp-block-navigation ul li a {
    width: 100%;
    text-align: center;
}

[Stefanie]

Works ☺☺☺

Thanks a bunch!!!

[Ying]

No problem 🙂

[Author]

Posts