[Resolved] Want to customize nev. menu

Home Forums Support [Resolved] Want to customize nev. menu

Home Forums Support Want to customize nev. menu

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • #2391200


    Is it possible to make the navigation menu:

    1. https://prnt.sc/jYFt5RwHMW1H
    2. https://prnt.sc/ox7lAw91Dlxr

    Menu>Logo> search bar.

    Customer Support

    Hi there,

    for the Menu > Logo > Search Bar:

    1. Add this PHP Snippet to your site:

    add_action('generate_before_logo', function(){
    	$icon = '';
    	if ( function_exists( 'generate_get_svg_icon') ) {
    		$icon = generate_get_svg_icon( 'menu-bars' );
    	<span class="slideout-toggle custom-slideout has-svg-icon"><a href="#"><?php echo $icon; ?></a></span>

    This will place a custom hamburger toggle to open the off canvas before the logo..

    2. In Customizer > Layout > Off Canvas, enable this for Desktop and Mobile.

    3. In customizer > Layout > Primary navigation – disable the Navigation Search.

    4. Now add your search block to the navigation – go to Appearance > Elements, create a new Block Element:


    In the settings siderbar set the Hook to menu_bar_items

    Set the Display rules to the Entire Site.

    In the editor add Search Block, and style it as you require,

    Once thats done, let me know as it will require some CSS to align things


    wow! This is cool!

    I’ve done it. please provide the CSS

    Customer Support

    Few other steps:

    1. add this PHP Snippet to remove the default Off Canvas hamburger

    remove_action( 'generate_menu_bar_items', 'generate_do_off_canvas_toggle_button', 15 );

    2. In Appearance > Menus create a new empty menu and assign it to the Primary Nav, this will remove those desktop menu items.

    3. If you want a search icon in the search then can you edit the block, in its toolbar you can select the Icon option. Let me know as this will affect the CSS it needs.

    4. Add this CSS to style the hamburger:

    .slideout-toggle.custom-slideout a {
        width: 40px;
        height: 40px;
        padding-bottom: 5px;
        display: flex;
        justify-content: center;
        align-content: center;
        background-color: var(--accent);
        color: var(--contrast);
        border-radius: 40px;
        font-size: 20px;
    .slideout-toggle.custom-slideout a:hover {
        opacity: 0.9;

    How can I remove the toggle after the search box.

    I can’t see the icon option in the search block. Please tell me how can I do this, Also please provide CSS as my picture for the search bar.

    Customer Support

    Add this CSS now:

    button.menu-toggle {
        display: none !important;

    Search Icon see here:



    I Select the default search block. don’t see the option, where I make it wrong: https://prnt.sc/DYLpLuO_tEdL

    Customer Support

    What do you see in the block toolbar ?


    I use it on a container now the setting showing, I want to use it in round box and icon like this: https://prnt.sc/BDY5eZC8Rzg0

    Customer Support

    See the image here:


    The button beside it will move the Search Icon inside the Input field.
    Can you enable that.


    I did it,

    Now I want to make it like this Image: https://prnt.sc/BDY5eZC8Rzg0

    Also, want to make it inline for mobile. If there no space for it. I want to make the search bar after the toggle and logo and want to make it center for mobile.


    Hello, are you there?

    Customer Support

    Try this CSS:

    .menu-bar-items {
        flex: 1 0 auto;
        justify-content: flex-end;
    .wp-block-search__inside-wrapper {
        padding: 3px 15px 5px 5px;
        margin: 4px;
        background-color: #fff;
        border-radius: 40px;
    .wp-block-search__inside-wrapper input[type="search"],
    .wp-block-search__inside-wrapper input[type="search"]:focus {
        line-height: 1;
        padding: 0 5px;
        background-color: transparent;
        border: 0;
        color: #000;
        width: 100%;
    .wp-block-search__inside-wrapper button {
        border: 0;
        background: unset;
        font-size: 20px;
        padding: 0;
        order: -1;
        margin-left: 0;
        margin-right: 10px;
        opacity: 0.6;
    .wp-block-search__inside-wrapper button:hover {
        color: #000;
        opacity: 1;
    @media(max-width: 525px) {
        .wp-block-search {
            width: calc( 100% - 10px );
            margin: auto;

    You are awesome!

    Perfect but on mobile, it is after 2nd line. I checked up to 120px it can be in inline.
    and in the box, 1st character is getting hidden: https://prnt.sc/KDyUZZywdocn

    please, maybe it needs the last one help.

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