Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › can't see the icons
This topic contains 11 replies, has 2 voices, and was last updated by Ernest Marcinko 6 years, 8 months ago.
- AuthorPosts
- July 7, 2017 at 7:09 pm #13896
Hi,
I am using on my site AVADA theme.
I added your search box to the main menu.
after doing that, the search box was align to the top of the menu and not in the middle so I added the margin of 35px.
after doing that, it cause a white line above as you can see on the attach image.
another issue I have is with the icons. I don’t see them. why? how can I fix it?also, how can I move the icons to be on the left side of the search box and not on the right side as it is now.
thank you.
Idan.Attachments:
You must be logged in to view attached files.July 10, 2017 at 11:34 am #13901Hi!
Can you please link me to an URL where I can see the issue? It is very likely that something is overriding some rules within the search stylesheets, but it’s impossible to tell without actuall seeing it.
Best,
It can be a bad margin, padding, visibility, float, coloring, z-index on either one of the elements, including the box, container, SVG etc.. Without seeing the issue, it’s not possible to tell what might it be.
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
July 10, 2017 at 12:17 pm #13904You cannot access this content.July 10, 2017 at 1:09 pm #13908Hi!
It looks like it’s only a margin issue, causing the container to display incorrectly. This custom CSS should get rid off it:
Best,.asp_main_container { margin-top: 1px !important; }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
July 10, 2017 at 1:40 pm #13909You cannot access this content.July 10, 2017 at 1:57 pm #13910Hi,
It’s because the mobile menu is a DOM copy of the non-mobile menu, probably done via javascript. This means that the search bar is simply ‘cloned’ onto a mobile menu version – causing invalid HTML and all of the event handlers are lost in the process as well – as it is not possible to copy events with DOM nodes in javascript. If this is the case, then unfortunately it’s not possible to resolve from the search perspective, but the menu code needs to be fixed to use a different method.
This means that any contents/shortcodes with event handlers – such as javascript search bars, sliders or any interactive content are very likely will not work with the mobile menu.
You can try the following to resolve the issue:
– If it’s possible, then make a different search instance for the mobile menu. If the menu contents are indeed cloned/copied, then this will probably not work, but worth a try.
– Place the mobile search in a different location instead of the menu.If there was any bypass solution to this, with a custom code I would gladly provide it for you, but unfortunately this is not possible to detect. Unfortunately lots of menu solutions use this ‘cloning’ method, which makes it impossible to properly place interactive elements into them.
Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
July 10, 2017 at 6:50 pm #13923ok, can we make some change on the css on mobiles only? so the search won’t goes above the image?
thank you.
July 11, 2017 at 1:34 pm #13929Hi,
I believe yes. You can use for example a pseudo class to target the mobile screen only:
Best,@media (max-width: 600px) { /* CSS rules here */ }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
July 11, 2017 at 2:09 pm #13931can you write me the css code I need to add?
July 11, 2017 at 2:18 pm #13933Hi!
You could maybe try these:
Best,li[id*=mobile-menu-item] .probox { margin-top: 0px !important; }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
July 11, 2017 at 3:44 pm #13934You cannot access this content.July 13, 2017 at 7:18 pm #13939Hi!
The URL does not seem to work for me anymore, I’m getting a 404 error. Without seeing I’m not sure, but you can try one of these maybe:
li[id*=mobile-menu-item] .asp_main_container { margin-bottom: 10px !important; }
or maybe:
Best,li[id*=mobile-menu-item] .asp_main_container { padding-bottom: 10px !important; }
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
- AuthorPosts
You must be logged in to reply to this topic.