Unable to fit search into top navigation menu

[batmanbldrParticipant]

I am having a problem where the search plugin adds additional “height” when trying to add it to the top menu. On ajaxsearchpro.com the search icon is even with the rest of topics. I want to do that AND add the search icon to the right (in white) just like you have it.

For the first I tried putting it into the menu but it looks “off” and adds a lot of height to the top menu (can’t figure out how to make it even with my original top menu. FYI- I use genesis Magazine pro theme.

See https://fortunateinvestor.com/ how there is about 10 pixels or so added to the top of the menu because of the search added in there. How do I change this?

Go to the Ajax Search Pro on the bottom left side of admin. I have TFI used at the search for the top navigation. However, after hours and hours I can’t get it to “fit” correctly.

Thank you,
Brooks

• This topic was modified 6 years, 2 months ago by  batmanbldr. Reason: confidential info

[Ernest MarcinkoKeymaster]

Hi Brook,

Thank you for the proper details, it makes my work much easier. I’m not able to log in to the back-end though, I get a sucury security restriction screen.

I see you either have some custom CSS there already, or the compact layout mode is enabled – in any case, please remove that it’s not correct, and turn off the compact mode if enabled. The problem with the height is that the menu items are only a few pixels high (text), and the rest of the menu is padding and margin. So adding a complex element (like a search block) will increase it’s inline height and add the margin and padding as normal.

The best and possibly the easiest solution is to set the parent menu element of the search to a ‘relative’ position, and the search bar to a forced ‘absolute position’. This results the search to be removed from the document flow, therefore accounted as ‘0’ pixels high:

#menu-item-10030 {
   position: relative;
}

#ajaxsearchpro1_1, #ajaxsearchpro1_2, div.ajaxsearchpro[id*="ajaxsearchpro1_"] {
    position: absolute;
    top: 28px;
    right: auto;
    width: auto;
}

..and that’s it. I believe this should position it correctly.

I’ve noticed something more problematic though. It seems that the menu is automatically adding some HTML elements to the search source code, altering the plugin structure, and causing potential issues: https://i.imgur.com/bYDoUxE.png

That might also be visually fixable:

.wpdreams_asp_sc-1>a {
    display: flex !important;
}

.wpdreams_asp_sc-1 .probox {
    width: 100% !important;
}

This results in the following layout on my screen: https://i.imgur.com/5vpKYkW.png

Please note that menus are usually not made to hold interactive elements (like search bars, sliders etc..), but for simple texts and images. That alteration in the search source might be done via a filter, which may be possible to disable via a custom code. If you want, you can ask the theme author how to remove or de-activate it.
I rather suggest adding the plugin shortcode directly to the theme files, you can also ask the theme author, which one to edit for that – and I gladly help you with the placement.

I cannot guarantee that my suggestion will work in all cases, as implementation qualifies as a customization request, nevertheless I still hope that I was able to help.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Ernest MarcinkoKeymaster]

Also, I forgot: To make a floating, compact search box like on the demo, just create another search instance for that, set it up for the compact layout, and place it to the footer via a widget – it’s possibly the fastest and most reliable way.

This way the first search instance will be used in the menu, and the other as the sidebar floating search.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[batmanbldrParticipant]

You are located in Slovakia? The backend probably blocked you because of your location. I just updated that for you.

This is more complex than I was hoping. I thought the plugin would make it simple not more complex. Are you able to help fix this if you can get into the admin panel now (should work)? I think you have the right solution but I am not certain how to implement it. Are you able to do it directly from the admin panel?

Let me know if there is an additional charge to fix this.

Thank you!

[batmanbldrParticipant]

I deactivated it for now as it seemed to break the top menu as you were talking about. Let me know if you can fix it and if there is an additional charge.

Thank you

[Ernest MarcinkoKeymaster]

Hi!

Thank you, yes, I’m located in Slovakia, I was able to log-in to the back-end now. No additional charge of course, this support stays free 🙂

I’ve managed to place both search instances to position – one in the menu, and one in the footer position.
The one in the menu was a piece of work, as the menu height was 14 pixels calculated, so of course as I mentioned earlier, it was kind of stretched upwards once a higher search field was placed there. I did the following:

Menu search
1. Placed the search shortcode as a menu item: https://i.imgur.com/NYSzaVO.png
2. Enabled compact layout mode, and applied the following configuration: https://i.imgur.com/Ef3WOHz.png
3. Then, added this custom CSS to the plugin back-end, under the Theme Options panel: https://i.imgur.com/qO7lYbA.png
4. And that’s it. The search in the menu is positioned and appears to be working.

There was actually no issue with the plugin after all, but some custom CSS rules had to be added, so that the menu is able to handle the form element. In these rules there is an exceptional one, that handles the correct layout on mobile menus as well.

Sidebar search
1. Also enabled the compact mode, with the folloing configuration: https://i.imgur.com/mrS0Swk.png
2. Then placed it to the page as a footer widget: https://i.imgur.com/3dtegEq.png
3. That’s it.

I hope this helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[batmanbldrParticipant]

Amazing! #1 The plugin is the best! #2 Your tech support is far and away better than any I have ever heard of! #3 I just liked your tweet, retweeted it and then another tweet at you about your support. Headed to codecanyon to rave about you also.

Thanks again!

[batmanbldrParticipant]

For Chrome It behaves like you said but for some reason on mobile and tablets everything gets messed up. Part of the problem is that 50% of my users are mobile and it is breaking in mobile. Also, on IE and Edge the search does NOT show up in the menu, it shows as light blue on the side search bar and the widget as white in the footer. I tried the same with Firefox. Something is still strange.

Can you take a look? You still have access when you get a chance.

[Ernest MarcinkoKeymaster]

Hi!

I believe you might see a previously cached version of your site. I just tried on mobile devices, IE, Firefox, but it all apears okay to me:

– Mobile video: https://www.youtube.com/watch?v=WyHbiCocAjQ
– IE Edge video: https://youtu.be/8Dinl0_5XFc
– Firefox video: https://youtu.be/zLiBUsoWM1Q

If you see something strange or broken, it is 100% a cache related problem. Especially if you previously opened those pages in those specific browsers. From this plugins perspective there is nothing I can do to force the cache to update, it has to be done via the caching solution you are using.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[batmanbldrParticipant]

You are right those look good. Thank you! But on mobile browsers and ipad is where i see the issue.

[batmanbldrParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi!

I just tried with an iphone SE, ipad mini, huawei tab (chrome) and huawei P10 mobile (chrome) but they all work exactly the same for me.

Can you attach a screencap of the issue, and aside from ipad, which mobile devices and browsers are not working? I’m not able to re-create the issue for some reason.
Please note that due to the market dominance, only the mobile chrome browser is fully supported.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts