Menu search icon position

  • Resolved rinzer

    (@rinzer)


    5 years, 6 months ago

    So I’m currently building this new site for the Karate-club in which my daughter is involved.

    I’ve inserted the Ivory search menu search into the main menu which is located in the header which is built with Elementor Header, Footer and Blocks.

    So far so good but there are two problems with the positioning of the icon:
    – in the desktop view the icon is placed to high in relation to the rest of the menu, there also seems to be a bit less space between the icon and the other menu items than there is between the other items
    – in tablet and mobile view the icon is positioned to far to the left.

    I’ve searched this forum for a clue about what to do but didn’t find anything that works for my situation. When looking at the code with the inspector I get confused by a lot of css coding (where my knowledge falls short, I’m afraid)

    Any help would be very much appreciated! Thnx, Rinze

    • This topic was modified 5 years, 6 months ago by rinzer.

    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)

    5 years, 6 months ago

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

    You can adjust its position by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

    .hfe-nav-menu li.is-menu {
    padding: 13px 0 0 12px;
}

@media only screen and (max-width: 1024px) {
    .hfe-nav-menu li.is-menu {
        padding: 13px 0 16px 40px;
    }
    .hfe-nav-menu .is-menu.is-dropdown form {
        right: auto;
        left: 0;
    }
    .hfe-nav-menu .search-close {
        right: auto;
        left: -22px;
    }
}

    Best regards,

    Thread Starter rinzer

    (@rinzer)

    5 years, 6 months ago

    Thank you! That solved my problem! Thnx again, Rinze

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    5 years, 6 months ago

    You are always welcome, I’m glad I was able to help you with 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://ww.wp.xz.cn/support/plugin/add-search-to-menu/reviews/

    I’d really appreciate that. 🙂

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

    Thread Starter rinzer

    (@rinzer)

    5 years, 6 months ago

    Done.

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    5 years, 6 months ago

    Thank you!

    Thread Starter rinzer

    (@rinzer)

    5 years, 5 months ago

    Hi, I’m still trying to style my menu. I don’t know if it’s even possible but I would like my search icon to change color when hovered. I guess that would require a svg in the right color?

    Thnx, Rinze

    https://www.lekkerengoedkoop.eu/

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    5 years, 5 months ago

    You can change the menu search icon hover color by using the below custom CSS code.

    li.is-menu:hover path.search-icon-path {
    fill: rgb(250, 0, 0);
}
    Thread Starter rinzer

    (@rinzer)

    5 years, 5 months ago

    Awesome, thnx! You’re the best.

    Plugin Author Vinod Dalvi

    (@vinod-dalvi)

    5 years, 5 months ago

    Glad to hear that it worked for you.

    Have a fantastic day!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Menu search icon position’ is closed to new replies.