Unable to fit search into top navigation menu

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Unable to fit search into top navigation menu

This topic contains 11 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 4 years, 11 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #13962
    batmanbldr
    batmanbldr
    Participant

    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 4 years, 11 months ago by batmanbldr batmanbldr. Reason: confidential info
    #13963
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13964
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13977
    batmanbldr
    batmanbldr
    Participant

    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!

    #13978
    batmanbldr
    batmanbldr
    Participant

    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

    #13979
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13980
    batmanbldr
    batmanbldr
    Participant

    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!

    #13981
    batmanbldr
    batmanbldr
    Participant

    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.

    #13984
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #13985
    batmanbldr
    batmanbldr
    Participant

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

    #13987
    batmanbldr
    batmanbldr
    Participant
    You cannot access this content.
    #13988
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.