Archived topic
Navigation Block CSS styling
3 replies · Started by Stefanie on February 28, 2023
Viewing posts 1–4 of 4
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!
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;
}Works ☺☺☺
Thanks a bunch!!!
No problem :)
This archived topic is closed to new replies.
