- This topic has 19 replies, 2 voices, and was last updated 1 year, 5 months ago by David.
-
AuthorPosts
-
October 28, 2022 at 3:38 am #2391200Sabbir
Hi,
Is it possible to make the navigation menu:
1. https://prnt.sc/jYFt5RwHMW1H
2. https://prnt.sc/ox7lAw91DlxrMenu>Logo> search bar.
October 28, 2022 at 7:22 am #2391514DavidStaffCustomer SupportHi 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
October 28, 2022 at 8:06 am #2391808Sabbirwow! This is cool!
I’ve done it. please provide the CSS
October 28, 2022 at 8:39 am #2391856DavidStaffCustomer 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; }
October 28, 2022 at 8:48 am #2391865SabbirHow 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.
October 28, 2022 at 8:52 am #2391870DavidStaffCustomer SupportOctober 28, 2022 at 8:55 am #2391878SabbirI Select the default search block. don’t see the option, where I make it wrong: https://prnt.sc/DYLpLuO_tEdL
October 28, 2022 at 8:57 am #2391879DavidStaffCustomer SupportWhat do you see in the block toolbar ?
October 28, 2022 at 8:59 am #2391883SabbirI 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
October 28, 2022 at 9:00 am #2391886SabbirOctober 28, 2022 at 9:04 am #2391890DavidStaffCustomer SupportSee 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.October 28, 2022 at 9:09 am #2391899SabbirI 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.
October 29, 2022 at 5:22 am #2392584SabbirHello, are you there?
October 29, 2022 at 5:29 am #2392591DavidStaffCustomer SupportTry 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; } }
October 29, 2022 at 5:36 am #2392596SabbirYou 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/KDyUZZywdocnplease, maybe it needs the last one help.
-
AuthorPosts
- You must be logged in to reply to this topic.