Streaming live at 10am (PST)

Can you please help me fixing my search bar?

Here is how it look at normal state


And when it expand, it hide my nav menu.

Please help


Here is my site Read-Only: https://preview.webflow.com/preview/adore?utm_medium=preview_link&utm_source=designer&utm_content=adore&preview=cf793fa1464c265d311af488078b054c&mode=preview
(how to share your site Read-Only link)

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;



    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.


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




This should be the outcome;

@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?

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.

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