How to place search box with social buttons

This topic contains 7 replies, has 2 voices, and was last updated by  nspbaltic 5 days, 8 hours ago.

  • Author
    Posts
  • #2829
    nspbaltic
    Participant
    • Topics: 1
    • Replies: 4

    Hey, really looking for your help.
    Is it possible to place search box on the right side near social media icons?
    P.S. Example attached

    Attachments:
    You must be logged in to view attached files.
  • #2831
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 267

    Not right side but on the left side of social icons as shown in the attaches screenshot.

    To achieve that we have to develop custom CSS code which i can do if you share me your site URL where it is displaying.

    Attachments:
    You must be logged in to view attached files.
    • #2835
      nspbaltic
      Participant
      • Topics: 1
      • Replies: 4

      .

  • #2833
    nspbaltic
    Participant
    • Topics: 1
    • Replies: 4
  • #2834
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 267

    You can achieve this by adding the below CSS code in the Custom CSS option of Add Search To Menu plugin settings on the path Settings -> Add Search To Menu

    
    .main-navigation li.astm-search-menu {
        float: right;
        margin-right: -40px;
    }
    
    .acmethemes-nav {
        width: 85%;
    }
    
    .main-navigation li.astm-search-menu .search-block {
        width: auto;
    }
    
    • #2837
      nspbaltic
      Participant
      • Topics: 1
      • Replies: 4

      Thanks, it worked. But I found one more problem. If you open site via mobile. Search button still is on scroll down menu, not near social icons, not sure if it is fixable, but if you click search icon there is no dropdown. I can’t insert anything. Only works if I put search box in default format. Is it possible to somehow fix it and use dropdown formar of search box as well in mobile version?

  • #2842
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 267

    It seems happening because of some type of conflict occurred on your site so to resolve this you can always display search form in the mobile navigation using below custom CSS code.

    
    @media screen and (max-width: 992px){
    .astm-search-menu.dropdown form {
        display: block !important;
        position: static;
    }
    .astm-search-menu > a {
        display: none !important;
    }
    .main-navigation li.astm-search-menu .search-block {
        float: left;
        margin-left: 0;
    }
    
    .main-navigation li.astm-search-menu {
        margin: 0;
    }
    }
    
  • #2847
    nspbaltic
    Participant
    • Topics: 1
    • Replies: 4

    It works. Thanks a lot. You are the best

You must be logged in to reply to this topic.