Change position on mobile

  • Resolved karlijn2

    (@karlijn2)


    6 years, 9 months ago

    Hello,

    Great plugin! Exactly what I was looking for.
    I am looking for a way to position the plugin differently on desktop and on mobile. For style reasons I prefer to have the search bar on the right of the menu on desktop, but for mobile it would be way more practical if it shows on top of the menu (so on the left) instead of all the way at the bottom.

    Is this possible?

    Also, on mobile the word “search” in the search box is aligned a bit too much to the left. It doesn’t look nice with the rest of the menu. Is it possible to change this?

    Thank you in advance!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Vinod Dalvi

    (@vinod-dalvi)

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

    To achieve this please select the option “Display Search Form in Header on Mobile Devices” in the plugin settings and enable the plugin on your shared site so that I can develop custom code to style it.

    Best regards,

    Thread Starter karlijn2

    (@karlijn2)

    Hello Vinod,

    I have selected the option and enabled the plugin.

    Best regards,

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    The search form still doesn’t display on your site on desktop.

    Please make sure you have configured the plugin settings correctly and selected the correct menu to display as shown in this screenshot https://imgur.com/a/CpFpc

    Thread Starter karlijn2

    (@karlijn2)

    Hello Vinod,

    You have to click through in the menu to another page than the homepage: https://karlijnskitchen.com/en/recipes/breakfast/

    I use a static front page and one way or another the search bar is not showing on the menu on the homepage, but only on the other pages.

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    Ok Now I can see it is displayed at the top on mobile device as shown in this screenshot https://imgur.com/a/qHfRk

    Thread Starter karlijn2

    (@karlijn2)

    Yes, but the issue I have is with the search bar shown in the menu.
    On desktop it looks fine, but for mobile, I would like it to show at the top of the menu instead of at the bottom.

    And the text in the search bar doesn’t align nicely

    Thank you in advance!

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    You can display it at the top of the menu on mobile devices 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

    
.astm-search-menu-wrapper {
    top: 65%;
    right: auto;
    left: auto;
}

.astm-search-menu-wrapper .astm-search-menu {
    float: none;
    display: table;
    margin: 0 auto;
}

@media screen and (max-width: 910px){
#site-navigation {
    margin-top: 6%;
}
}
@media screen and (max-width: 510px){
#site-navigation {
    margin-top: 12%;
}
}
@media screen and (max-width: 390px){
#site-navigation {
    margin-top: 25%;
}
}
@media screen and (max-width: 310px){
    .astm-search-menu-wrapper {
    top: 50%;
    }
    nav#site-navigation {
    margin-top: 25%;
}
}
    Thread Starter karlijn2

    (@karlijn2)

    Hi Vinod,

    This is not working well for me. It displays the menu on a random place in the middle of the screen.

    I have another question. I use a static frontpage on my blog and the search field in the menu is not working on the frontpage. It works fine on all the other pages. Any idea what could be causing this?

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    This is not working well for me. It displays the menu on a random place in the middle of the screen.

    Could you please share me the screenshots of the issues?

    For screenshots, you can simply provide a link to an image through Google Drive, Dropbox, screencast.com, https://imgur.com/ or other image service. ??

    I have another question. I use a static frontpage on my blog and the search field in the menu is not working on the frontpage. It works fine on all the other pages. Any idea what could be causing this?

    I could confirm the issue on your shared site but it works fine on all the pages with default WordPress theme.

    Are you using following theme on your site?

    https://www.pankogut.com/wordpress-themes/biscuit/

    If yes then could you please contact the theme author to know what’s the issue in it as I also don’t see your home page menu same like your other pages menus?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Change position on mobile’ is closed to new replies.