[Resolved] Add button to an item on menu

Home Forums Support Add button to an item on menu

  • This topic has 17 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #998235
    An Nguyen

    Hi Tom, David and Leo,

    I need your help!

    Can I add a button “New” with animation affect like this GP site?

    I try to add css class “menu-badge badge-bounce” in menu and add css code like this below but it not work

    CSS:

    
    .badge-bounce {
        animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
    }
    .menu-badge {
        font-size: 9px;
        margin-left: 4px;
        position: relative;
        top: -10px;
        margin-bottom: 13px;
        color: #FF0000;
        background-color: #fff;
        padding: 3px 4px;
        border-radius: 3px;
    }
    

    Thanks all,
    Have a nice day!

    #998378
    David
    Staff
    Customer Support

    Hi there,

    the original topic for adding that to the site can be found here:

    https://generatepress.com/forums/topic/how-to-enable-these-in-menu/

    #998556
    An Nguyen

    Thanks David,

    It works perfect.

    I got some issues related to main navigation.

    1/ Can you help me to disable slideout-toogle (cavas-off) on home page & page id-1630 and increase the width of cavas-off around 50px ?

    I tried with this css below to disable it but the code did not work. It’s still there.

    .home .slideout-toggle,
    .page-id-1630 .slideout-toggle {
        display: none;
    }

    2/ I saw an error of size format of box search on sticky menu when I tried to click on search icon and my CSS size-format for search box is change, but in main-menu at top, it displays correct size.

    -I also want to add contents inside placeholder like “Type info and search here…”.

    I used Tom’s CSS code

     .navigation-search.nav-search-active {
        left: auto;
        width: 355px;
        top: 100%;
        padding: 10px;
        background: #fff;
        border: 1px solid #ddd;    
    }
    
    .navigation-search.nav-search-active input {
        
        border-radius: 5px;
        height: 10px;
    
    }
    
    .navigation-search {
        top: 150%;
        transition: opacity 300ms ease-in-out, top 300ms ease-in-out;
        left: auto;
    }
    .navigation-search.nav-search-active .search-button {
        position: absolute;
        right: 10px;
        top: calc(50% - 15px);
        height: 30px;
        display: block;
        content: "\f002";
        font-family: GeneratePress;
        opacity: .5;
        width: auto;
        background: transparent;
        color: #000 !important;
        border: 0;
        padding: 3px 5px 5px 5px; 
    }
    #998731
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Can you try this instead?:

    body.home .main-navigation .slideout-toggle, 
    body.page-id-1630 .main-navigation .slideout-toggle {
        display: none;
    }

    Then, to increase the width, try this:

    .main-navigation.offside {
        width: 300px;
    }
    
    .offside--right.is-open {
        -webkit-transform: translate3d(-300px,0,0);
        -moz-transform: translate3d(-300px,0,0);
        -ms-transform: translate3d(-300px,0,0);
        -o-transform: translate3d(-300px,0,0);
        transform: translate3d(-300px,0,0);
    }
    
    .offside--right {
        right: -300px;
    }
    
    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: 300px;
    }

    2. Give this a shot:

    .main-navigation.sticky-navigation-transition .navigation-search input[type="search"] {
        height: 10px;
    }
    
    .main-navigation.sticky-navigation-transition .navigation-search input[type="submit"] {
        height: auto;
    }

    3. For the placeholder, we need to filter the html. It looks like we already are to add the button, so can you share the filter you’re currently using so we can adjust it?

    #998737
    An Nguyen

    Hi Tom,

    1/ code is good. It hides now. The size also increases 50px however, the right-padding is big. It needs to change.

    2/ The display error is fixed.

    3/I used your code in github:

     add_filter( 'generate_navigation_search_output', function() {
        printf(  
            '<form method="get" class="search-form navigation-search" action="%1$s">
                <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />
                <input type="submit" class="search-button" value="">
            </form>', 
            esc_url( home_url( '/' ) ), 
            esc_attr( get_search_query() ),   
            esc_attr_x( 'Search', 'label', 'generatepress' ) 
        ); 
    } );
    #998741
    Tom
    Lead Developer
    Lead Developer

    1. I’m not seeing any padding change – where should I be looking?

    3. In that code, replace this:

    <input type="search" class="search-field" value="%2$s" name="s" title="%3$s" />

    With this:

    <input placeholder="Type info and search here.." type="search" class="search-field" value="%2$s" name="s" title="%3$s" />

    #998747
    An Nguyen

    Hi Tom,

    1/I mean the content and the box search inside cavas-off (when slide-toggle is opened) need to increase the right-padding, because now, they are still the same size. You can see that there are around 50px from the right.

    3/Code works perfect, Tom!

    #999226
    Tom
    Lead Developer
    Lead Developer

    The only thing that isn’t full width is the search bar. Try adding this:

    .slideout-navigation .search-form input {
        width: 100%;
    }
    #999232
    An Nguyen

    Thanks Tom, now it looks good.

    #999243
    Tom
    Lead Developer
    Lead Developer
    #999260
    An Nguyen

    Hi Tom,

    It still has 1 small issue from mobile site when I tried to click on search button. The text displays in placeholder is just 1/2 in horizontal, but in desktop mode, it displays perfectly.

    Thanks Tom.

    #999497
    Tom
    Lead Developer
    Lead Developer
    #999543
    An Nguyen

    Hi Tom,

    It’s fixed.

    Thanks Tom!

    #1000098
    Tom
    Lead Developer
    Lead Developer
    #1015462
    An Nguyen

    Hi Tom,

    I have an issue on search function. When I click on search icon, the search panel moves down over the the header.
    I turned off all plugins and autoptimze. Could you help me for that?

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