[Resolved] Want to customize nev. menu

[Sabbir]

Hi,

Is it possible to make the navigation menu:

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

Menu>Logo> search bar.

[David]

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>
	<?php
});

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:

https://docs.generatepress.com/article/block-element-hook/

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

[Sabbir]

wow! This is cool!

I’ve done it. please provide the CSS

[David]

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

[Sabbir]

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.

[David]

Add this CSS now:

.menu-bar-item.slideout-toggle,
button.menu-toggle {
    display: none !important;
}

Search Icon see here:

https://www.screencast.com/t/nan3wnv525IQ

[Sabbir]

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

[David]

What do you see in the block toolbar ?

[Sabbir]

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

[Sabbir]

https://prnt.sc/BDY5eZC8Rzg0

[David]

See the image here:

https://generatepress.com/forums/topic/want-to-customize-nev-menu/#post-2391870

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

[Sabbir]

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.

[Sabbir]

Hello, are you there?

[David]

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

}

[Sabbir]

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.

[Author]

Posts