can't see the icons

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
  • #13896
    Idan Damti
    Idan Damti
    Participant

    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.
    #13901
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

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


    #13904
    Idan Damti
    Idan Damti
    Participant
    You cannot access this content.
    #13908
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

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

    .asp_main_container {
        margin-top: 1px !important;
    }
    Best,
    Ernest Marcinko

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


    #13909
    Idan Damti
    Idan Damti
    Participant
    You cannot access this content.
    #13910
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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.

    Best,
    Ernest Marcinko

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


    #13923
    Idan Damti
    Idan Damti
    Participant

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

    thank you.

    #13929
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

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

    @media (max-width: 600px) {
        /* CSS rules here */
    }
    Best,
    Ernest Marcinko

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


    #13931
    Idan Damti
    Idan Damti
    Participant

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

    #13933
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    You could maybe try these:

    
    li[id*=mobile-menu-item] .probox {
        margin-top: 0px !important;
    }
    Best,
    Ernest Marcinko

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


    #13934
    Idan Damti
    Idan Damti
    Participant
    You cannot access this content.
    #13939
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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:

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

    or maybe:

    li[id*=mobile-menu-item] .asp_main_container {
        padding-bottom: 10px !important;
    }
    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.