Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 23, 2016 at 8:15 pm #676643
    zimbo

    I have implemented this solution https://kriesi.at/support/topic/adding-search-icon-to-mobile-menu-hamburger-icon/ on this site.

    When the search icon is clicked in responsive mode, the pop-up search input box appears but it is covered by the hamburger menu icon.

    The CSS element .html_bottom_nav_header .avia-search-tooltip also controls the non-responsive behaviour of the search input box when the search icon is clicked on the menu bar, so I need to target the responsive-only behaviour of this element to move the search input box down (or elsewhere so that the hamburger doesn’t cover it).

    I have tried this:

    @media only screen and (max-width: 1440px) {
.responsive .html_bottom_nav_header .avia-search-tooltip {
    top: 85px !important; }}

    but it doesn’t work.

    I’ve also tried changing .avia-search-tooltip .avia-tt but no success either.

    Can you suggest how I can move the input box down please in responsive mode?

    August 29, 2016 at 4:30 am #678732
    Ismael

    Hey zimbo,

    Thank you for using Enfold.

    Adjust the position of the search box with the following css code:

    @media only screen and (max-width: 989px) {
     .responsive .avia-search-tooltip {
         left: -200px !important;
     }
}

    Best regards,
    Ismael

    August 30, 2016 at 1:31 pm #679410
    zimbo

    Great, thanks.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Move avia-search-tooltip box when responsive’ is closed to new replies.