Can you please help me fixing my search bar?

Design help Custom code
1

Here is how it look at normal state

image
image1118×110 8.46 KB

And when it expand, it hide my nav menu.

Please help

Here is my site Read-Only: Webflow - ADORE
(how to share your site Read-Only link)

2

Hey Jen,

This is more of a styling issue than a custom code issue.

Steps to follow;

  1. Remove the - 70px margin & 84px right padding from your menu links inside the nav menu and set them as below;

    step 1
    step 12869×1785 735 KB
    step 1 - soln
    step 1 - soln2877×1786 740 KB


    Make sure to also change this for the current menu item.

  2. Change the position of the animation search element to relative instead of absolute.

    step 2
    step 22878×1794 701 KB

  3. Change the display of the animation search element to inline-block instead of flex

    step 3
    step 32873×1782 751 KB


This should be the outcome;

result
result1842×216 529 KB

3

@AlexManyeki But I still struggle in my mobile version. First I can’t see the search bar and second with the Buy Me a Coffee button I don’t have space to add the search button. Can you suggest what should I do?

4

This is because those two elements are placed inside the nav menu which becomes the expandable mobile menu on smaller screens.

If you need them to be always visible across all devices, consider putting the two in the nav container instead of the nav menu.

5

Can you please show how to do it in the video :sweat_smile: