Adding search into menu

[kenzandmom83]

Hi,
Thanks for the great plugin, though I wonder about the best way to add the the search functionality into the top menu (not using any custom menu, just the basic WP one, let me know if it’s better to get a custom menu please).
I have a WordPress site installed on my localhost (not online yet) and I want you suggestion about the best approach to add search into the menu so it looks pretty good looking and excellent for user experience.

Thanks,

Yaser.

[Ernest Marcinko]

Hi,

The simplest way is to use the search shortcode. Adjustments are probably still required – as each menu works very differently. Margins, paddings, heights, alignments depend on the menu layout.

Usually, negative/positive left and top margins are sufficient to adjust the search container to the menu. I suggest a custom CSS like this:

.asp_m {
    margin-top: -10px !important;
    margin-left: 0px !important;
}

This is only a sample code. The values have to be experimented with. If the search alignment is higher than the other menu elements, then try positive top margin, otherwise negative. Same for the side margins. But again, this highly depends on the exact layout, some additional adjustments might be required.

[kenzandmom83]

You cannot access this content.

[kenzandmom83]

You cannot access this content.

[Ernest Marcinko]

You cannot access this content.

[kenzandmom83]

You cannot access this content.

[Ernest Marcinko]

Hi,

The issue was only a problem with the shortcode, not the correct one was used. I have corrected that in the page builder. The correct shortcode for the compact search is this:

[wd_asp id=3]

It should display results now.

[kenzandmom83]

You cannot access this content.

[Ernest Marcinko]

Hi,

I just checked but the front-end search has the same exact font as set on the back-end (Times new roman): https://i.imgur.com/N1T0vBV.png
If you have a cache active, make sure to clear everything – CDN, page, asset, minify and browser caches. That will resolve the issue.

[kenzandmom83]

You cannot access this content.

[Ernest Marcinko]

Make sure to always clear your site cache, asset, CDN cache, browser cache. On my end it looks all right: https://i.imgur.com/y82tv74.png

[kenzandmom83]

You cannot access this content.

[Ernest Marcinko]

Hi,

Oh, I’m sorry I missunderstood. I think the problem might be the configuration here: https://i.imgur.com/6MuQfXJ.png
I no longer see the compact search, so I cannot confirm, but looking at the search setting on search ID=4 the mobile and the tablet width is set to 400px instead of 100%.

[kenzandmom83]

You cannot access this content.

[kenzandmom83]

You cannot access this content.

[Author]

Posts