[Resolved] Add button to an item on menu

[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!

[David]

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/

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

[Tom]

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?

[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' ) 
    ); 
} );

[Tom]

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" />

[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!

[Tom]

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

.slideout-navigation .search-form input {
    width: 100%;
}

[An Nguyen]

Thanks Tom, now it looks good.

[Tom]

You’re welcome 🙂

[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.

[Tom]

What browser is this happening in? Does this help?: https://generatepress.com/forums/topic/safari-iphone-search-positioning-bug/#post-870262

[An Nguyen]

Hi Tom,

It’s fixed.

Thanks Tom!

[Tom]

You’re welcome 🙂

[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?

[Author]

Posts