Using the `generate_inside_secondary_navigation` custom hook

Hi there,

the customizer has no control over what is added to a Hook as it would have no way of identifying the variable content a user may add.

Happy to help with some CSS if you can link me to a page where i can see the secondary navigation.

Hi David, that would be a great help,

I want the buttons centered, and color control over hoover and active button

Thanks in advance!

Carsten

Try this CSS:

#secondary-navigation .secondary {
    display: flex;
    justify-content: center;
}
.secondary ul li a.button {
    color: #fff;
    background-color: #f00;
}
.secondary ul li a.button:hover {
    color: #fff;
    background-color: #00f;
}

Thanks a lot, working great, is there something about that it is not possible to change the color of the active tab with css alone, without changing the markup?

Before I had the active tab underlined, is this code reusable for the secondary navigation element?

/*SECONDARY NAVIGATION STYLING, CURRENT, HOVER UNDERLINE*/

@media (max-width: 769px) {
    .secondary-navigation .secondary-menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 10px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 1px;

        background-color:   #3f3f3f;
        transition: 0.3s width ease;
    }
    .secondary-navigation .secondary-menu > .menu-item.current-menu-item > a::after,
    .secondary-navigation .secondary-menu > .menu-item.current-menu-ancestor > a::after,
    .secondary-navigation .secondary-menu > .menu-item > a:hover::after {
        width: 70%;
			 
    }
}

Before I had a border above the secondary navigation, now the width of the border is only covering the buttons, not full width. Can this be changed for the element?
https://imgur.com/FdCEP44

.secondary-nav-aligned-center .secondary-navigation ul, .secondary-nav-aligned-right .secondary-navigation ul {
  
    
	 border-top: 2px solid #e4e4e4;
}

Thanks

Hi there,

That CSS should work fine with the Secondary Nav.

Feel free to share your URL if you'd like us to take a look.

Sure, thanks for looking into this

Hi,

Thanks a lot, working great, is there something about that it is not possible to change the color of the active tab with css alone, without changing the markup?

You can try making use of :visited on your CSS.

Example:

.secondary ul li a.button:visited {
    color: #fff;
    background-color: #e4e4e4;
}

Let us know if this works for you.