[Resolved] Using the `generate_inside_secondary_navigation` custom hook

[Carsten]

Hi there, I have created a hook element, with some custom code for special navigation tabs,using the custom hook generate_inside_secondary_navigation

I would have expected that the content could be customized with the layout options like Navigation Alignment or Color under the Secondary Navigation options, but it can’t?

Thanks!

[David]

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.

[Carsten]

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

[David]

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;
}

[Carsten]

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?

View post on imgur.com

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

Thanks

[Tom]

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.

[Carsten]

Sure, thanks for looking into this

[Elvin]

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.

[Author]

Posts