search form in the navbar

  • Resolved bikeur62

    (@bikeur62)


    10 years, 3 months ago

    Hello,

    I have added the search form in the navbar like you have explained in the snippet. Nevertheless I’ve got a problem with the picture. When we are clicking on it, it is displayed at the middle of the search box, over the text “search for”.

    My website is:
    https://beauty-chanel-esthetic.fr/

    How can I put the picture at the right corner of the search box.

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author presscustomizr

    (@nikeo)

    Hi,
    You need to specific a right or left property for the form pseudo-class selector. Like for example :

    .my-nav-menu-search .search-form:before {
font-family: 'genericons';
content: '\f400';
position: absolute;
left: 0px;/* This is new */
font-size: 19px;
font-weight: normal;
padding-top: 5px;
padding-left: 5px;
}

    Hope this helps!

    Thread Starter bikeur62

    (@bikeur62)

    Hi,

    Thank you for your help but that doesn’t work because you move only the picture before search form. Thus the picture is not clickable anymore.

    I have finally found the solution. You just have to had

    .my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
             margin: 0 0 0 100px;
}

    to the CSS that the snippet gives: https://www.themesandco.com/snippet/adding-an-html5-search-form-in-your-wordpress-menu/

    So finally very easy because you just have to play with the margin of the search form but I learn by myself so that was not so obvious for me …

    I hope that will help someone help.

    Bye

    Thread Starter bikeur62

    (@bikeur62)

    Solved

    Theme Author presscustomizr

    (@nikeo)

    OK thanks for the feedback and enjoy the theme !

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘search form in the navbar’ is closed to new replies.