Shop Categories

X

Search bar/icon on tablet version

Home Forums Agama Pro Search bar/icon on tablet version

Topic Resolution: Resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #27430
    Maddy
    Participant

    Hi Zex,

    I haven’t noticed before but on the tablet landscape position, the search icon goes on the second line. In the portrait position there is the hamburger menu and the search icon. When I press the search icon, the search bar appears way up on top of the hamburger menu. Can you please help me fix these issues? I would like the search bar closer to the search icon. Thank you so much for your help.

    Best wishes,
    Maddy

    #27431
    Zex
    Moderator

    Hi, Maddy!

    Try to insert the following code into Customizing->General->Additionall CSS:

    @media only screen and (max-width: 992px) {
        .vision-search-box.active{
            top:60%!important;
            right:50px!important;
        }  
      }

    Adjust the top and right values as you need.

    Regards

    • This reply was modified 2 years, 4 months ago by Zex.
    #27434
    Maddy
    Participant

    Hi Zex,

    Thank you so much for your help. Can you also help me fix the menu on the tablet horizontal position? The search icon goes on the second line.

    Best regards,
    Maddy

    #27436
    Zex
    Moderator

    Hello, Maddy!

    To fix that, navigate to your custom CSS, and replace this code:

    .mobile-menu-icons{
      display: relative!important;
      flex-direction: column!important;
    	margin:10px;
    	right:0px!important;
    }
    .mobile-menu-search{
     order: 2!important;
     margin:10px auto!important; 
     text-align: center!important;
    }

    https://prnt.sc/ti8esg (delete this code)

    with the following:

    .mobile-menu-icons{
    	margin:10px;
    	right:0px!important;
    }
    .mobile-menu-search{
     margin:10px auto!important; 
     text-align: center!important;
    }
    .mobile-menu-toggle.toggle--elastic {
        margin-left: 5px;
    }

    Regards

    #27437
    Maddy
    Participant

    Hi Zex,

    The code seems to not change at all the second line on the horizontal position but adds the search icon next to hamburger menu on the portrait position which I don’t want to. Is there another way to fix it?

    Best regards,
    Maddy

    #27438
    Zex
    Moderator

    Sorry for the misunderstanding 🙂

    Now I see the problem.

    So, forget the previous post and add additionally the following code into your custom CSS:

    @media (max-width: 1022px), (min-width: 993px) {
    .main-navigation>div>ul>li {
        padding-right: 20px!important;}
    }

    Regards

    #27439
    Maddy
    Participant

    Thanks, Zex. Everything works fine now.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.