Removing Search icon - mobile menu layout

[Cygal2024]

Hello,

We want to remove the search icon from the main menu. After I delete it, the spacing between the menu, the logo and the phone icon doesn’t automatically adjust. How can we fix this?

We’d like the menu and phone icons to be equal distant from the logo. Please advise.

Thanks for your help!

[Cygal2024]

We would be ok with an email icon replacing the search icon if that’s easier. Thanks!

[tristup]

Hi Catrine,

Thanks for reaching out.
Can you please provide login credentials for your site in a secure note to examine it and assist, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Cygal2024]

Thanks, will do.

[ruenel]

Hey Catrine,

You will have to modify your custom header and use this element structure instead:

This should give you a look like the Second one:

Hope this makes sense.

[Cygal2024]

Thanks for the info. Where can I find this? I don’t see the (1) version under Header and did not build this site so don’t know where the custom header is.

[ruenel]

Hello Catrine,

I was logged in to your site and have duplicated the “Logo/Navigation desktop” Bar element to create the demo for my response above. You do not see it because I did not save all the changes I made.

You can edit the custom header in the URL posted in the secure note below.

Cheers.

[Cygal2024]

Thanks. When I delete the Search modal, it does not automatically center the logo. I also tried replacing the search with an icon for email but could only find the attached. Is it possible to add a single envelope icon that links to email and have that displayed on both desktop and mobile?

[tristup]

Hi Catrine,

The logo will not be centered automatically, as the width is not properly adjusted. I would suggest you add the 3 container, set the width to 33%, and add the Logo inside the middle container, so even if you add or remove anything from any of the other containers, the Logo will be in the center.
Regarding the Email icon, you can use the Headline element and remove the Text and add the Icon using the Graphics tab. Also add the Email Details as shown in the given screenshot.

Hope it helps.
Thanks

[Cygal2024]

Thanks! I was able to add the email icon and remove the search modal. Can you please explain how I can add the 3 containers to just the mobile menu?

[tristup]

Hi Catrine,

If you want to add 3 containers only on the Mobile devices, add a Bar with the condition to show only on the Mobile and add 3 containers on that. Please set other Bar hidden in the Mobile devices, using the Hide During Breakpoints option.

Hope it helps.
Thanks

[Cygal2024]

Thanks for the info. I was able to add a bar just for mobile and created 3, 33% containers. However, when I add the 2 Headline modules (phone and email icons), it is not appearing the way I’d like (see attached screenshot). How can we make the phone icon closer to the email icon? I tried changing the padding to 0px on the right of the phone icon but nothing changed. I have hidden this bar for the time being so you will not see it unless you log in and activate it in the Hide During Breakpoints section. Please advise.

[tristup]

Hi Catrine,

The easiest way to do that is by adjusting the margin for the phone icon as shown in the given screenshot.

Hope it helps.
Thanks

[Cygal2024]

Perfect. Thanks for your help!

[prakash_s]

You are most welcome @Cygal2024

[Cygal2024]

Unfortunately, this change is not appearing on actual phones. I have tried viewing in an incognito window and also on another browser but it looks like this:

[Cygal2024]

Nevermind…the client likes it. Thanks for your help!

[ruenel]

You are most welcome, Catrine.