can't see the icons

[Idan Damti]

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.

[Ernest Marcinko]

Hi!

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.
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.

[Idan Damti]

You cannot access this content.

[Ernest Marcinko]

Hi!

It looks like it’s only a margin issue, causing the container to display incorrectly. This custom CSS should get rid off it:

[html].asp_main_container {
margin-top: 1px !important;
}[/html]

[Idan Damti]

You cannot access this content.

[Ernest Marcinko]

Hi,

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.

[Idan Damti]

ok, can we make some change on the css on mobiles only? so the search won’t goes above the image?

thank you.

[Ernest Marcinko]

Hi,

I believe yes. You can use for example a pseudo class to target the mobile screen only:

[html]@media (max-width: 600px) {
/* CSS rules here */
}[/html]

[Idan Damti]

can you write me the css code I need to add?

[Ernest Marcinko]

Hi!

You could maybe try these:
[html]
li[id*=mobile-menu-item] .probox {
margin-top: 0px !important;
}[/html]

[Idan Damti]

You cannot access this content.

[Ernest Marcinko]

Hi!

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:

[html]li[id*=mobile-menu-item] .asp_main_container {
margin-bottom: 10px !important;
}[/html]

or maybe:

[html]li[id*=mobile-menu-item] .asp_main_container {
padding-bottom: 10px !important;
}[/html]

[Author]

Posts