Search icon placement and mobile menu problems

This topic contains 11 replies, has 2 voices, and was last updated by  Vinod Dalvi 4 weeks, 1 day ago.

  • Author
    Posts
  • #2880
    novelparadise
    Participant
    • Topics: 1
    • Replies: 6

    Hey!
    I installed your plugin and am loving it so far. Thanks for this amazing plugin.
    I need some help with mobile display.
    Please visit Novel Paradise . As you can see, the search icon is above the right corner of menu icon. I would like to place it adjacent to the menu icon on either side.
    Moreover, when you scroll down, you should have noticed that the search icon disappears from the menu (sticky). Please provide some assistance with that problem too.
    Also, in the navigation menu, searching for the first time keeps font in black color. However, when I search for the second time, I can’t see anything in the search bar when typing, i.e. the font color becomes white.
    Lastly, when I pace the search with default functionality, and open the menu in mobile view, and then tap on the search bar to type, it closes the menu instead of typing.

    Please give me your valuable assistance in solving these issues.

    Thanks

  • #2882
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 318

    I hope you are well today and thank you for your questions.

    Please visit Novel Paradise . As you can see, the search icon is above the right corner of menu icon. I would like to place it adjacent to the menu icon on either side.

    I don’t see it as shown in the attached screenshot so please advise.

    Moreover, when you scroll down, you should have noticed that the search icon disappears from the menu (sticky). Please provide some assistance with that problem too.

    You can resolve 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

    ul.dropdown-menu li.astm-search-menu.astm-search-menu.dropdown {
        overflow: visible;
    }

    Also, in the navigation menu, searching for the first time keeps font in black color. However, when I search for the second time, I can’t see anything in the search bar when typing, i.e. the font color becomes white.

    Use below CSS code to resolve it.

    .astm-search-menu input.search-field {
        color: #313439 !important;
    }

    Lastly, when I pace the search with default functionality, and open the menu in mobile view, and then tap on the search bar to type, it closes the menu instead of typing.

    To resolve this you can always display search form on mobile by using following custom CSS code.

    @media (max-width: 1023px){
    .astm-search-menu.dropdown form {
        display: block !important;
        top: 0;
    }
    }

    Best regards,
    Vinod Dalvi

    Attachments:
    You must be logged in to view attached files.
    • #2884
      novelparadise
      Participant
      • Topics: 1
      • Replies: 6

      Hello!
      Thank you for your reply. I’ll implement them and test them.

      I don’t see it as shown in the attached screenshot so please advise.

      I have attached a screenshot. Perhaps I did not explain it clearly, I meant the icon in the mobile navigation bar.

      Thanks

      Attachments:
      You must be logged in to view attached files.
  • #2886
    novelparadise
    Participant
    • Topics: 1
    • Replies: 6

    Hello Vinod!
    I implemented your CSS code snippets. But the search icon still does not stay on navigation bar. Attached are the screenshots for both tab and mobile view. Really thankful for your assistance.

    Regards

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

    Please visit Novel Paradise . As you can see, the search icon is above the right corner of menu icon. I would like to place it adjacent to the menu icon on either side.

    I implemented your CSS code snippets. But the search icon still does not stay on navigation bar. Attached are the screenshots for both tab and mobile view.

    Please try using the below custom CSS code to achieve this.

    body div.astm-search-menu-wrapper {
        right: 60px;
        top: 20px;
        width: auto;
    }
  • #2896
    novelparadise
    Participant
    • Topics: 1
    • Replies: 6

    Hey Vinod!
    Thank you for your responses. I appreciate all the effort you are putting in helping me. I am thankful to you for that.

    Please try using the below custom CSS code to achieve this.

    body div.astm-search-menu-wrapper {
    right: 60px;
    top: 20px;
    width: auto;
    }

    I did just that and it solved the problem for mobile view, but not the tab view. Attached is the screenshot in tab view where search icon is seriously misplaced. Also, the other problem still persists. When I scroll down in mobile and tab view, the search icon disappears from the navigation.

    Best regards.

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

    Please try using below custom CSS code.

    
    body div.astm-search-menu-wrapper {
        position: fixed;
    }
    
    body div.astm-search-menu-wrapper {
        top: 67px;
        right: 110px;
    }
    @media screen and (max-width: 768px){
    body div.astm-search-menu-wrapper {
        top: 23px;
        right: 65px;
    }
    }
    
  • #2901
    novelparadise
    Participant
    • Topics: 1
    • Replies: 6

    Hey Vinod!
    Thank you for your reply. I tweaked the above code for tab mode. But then I noticed the search icon was too far apart in mobile view as shown in screenshot. If I don’t tweak the code (pixels), the search icon overlaps the menu icon in tab view.
    Isn’t there any way to separate between mobile and tab view?

    Below is all the CSS code in plugin CSS section.

    ul.dropdown-menu li.astm-search-menu.astm-search-menu.dropdown {
        overflow: visible;
    }
    .astm-search-menu input.search-field {
        color: #313439 !important;
    }
    body div.astm-search-menu-wrapper {
        right: 60px;
        top: 20px;
        width: auto;
    }
    body div.astm-search-menu-wrapper {
        position: fixed;
    }
    
    body div.astm-search-menu-wrapper {
        top: 67px;
        right: 110px;
    }
    @media screen and (max-width: 768px){
    body div.astm-search-menu-wrapper {
        top: 25px;
        right: 100px;
    }
    }

    Thanks for your amazing support so far.

    Best Regards

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

    Try changing above shared CSS code as following.

    
    ul.dropdown-menu li.astm-search-menu.astm-search-menu.dropdown {
        overflow: visible;
    }
    .astm-search-menu input.search-field {
        color: #313439 !important;
    }
    body div.astm-search-menu-wrapper {
        right: 60px;
        top: 20px;
        width: auto;
    }
    body div.astm-search-menu-wrapper {
        position: fixed;
    }
    
    body div.astm-search-menu-wrapper {
        top: 25px;
        right: 130px;
    }
    @media screen and (max-width: 768px){
    body div.astm-search-menu-wrapper {
        right: 80px;
    }
    }
    
  • #2911
    novelparadise
    Participant
    • Topics: 1
    • Replies: 6

    Hey!
    I changed right: 80px to 90px and decided to settle with it. Thanks for all your support and for this practical plugin.

    Best Regards

  • #2912
    novelparadise
    Participant
    • Topics: 1
    • Replies: 6

    Hey!
    Is the search form displayed by plugin the default wordpress form?
    Is there any way to restrict the search only to Page Title?
    Thanks

  • #2913
    Vinod Dalvi
    Keymaster
    • Topics: 0
    • Replies: 318

    Is the search form displayed by plugin the default wordpress form?

    The search form is displayed by theme that you are using on your site. The plugin only position it in the menu.

    Is there any way to restrict the search only to Page Title?

    Currently the plugin doesn’t provide this option so you have to develop custom code to achieve this.

    I will add this feature in the future version of plugin.

    I changed right: 80px to 90px and decided to settle with it. Thanks for all your support and for this practical plugin.

    You are most welcome, I’m glad I was able to help you in this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:

    https://wordpress.org/support/plugin/add-search-to-menu/reviews/?filter=5

    I’d really appreciate that. 🙂

    And if i can be of any further assistance please don’t hesitate to ask.

You must be logged in to reply to this topic.