[Resolved] Using the `generate_inside_secondary_navigation` custom hook

Home Forums Support Using the `generate_inside_secondary_navigation` custom hook

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1488065
    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!

    #1488147
    David
    Staff
    Customer Support

    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.

    #1488182
    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

    #1488322
    David
    Staff
    Customer Support

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

    #1489217
    Tom
    Lead Developer
    Lead Developer

    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.

    #1489254
    Carsten

    Sure, thanks for looking into this

    #1489353
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.