Nav bar background color help needed before my client kills me

Community resources General
1

Help, I’ve got a page going, and need the background on the menu nav bar to change from Transparent to Orange (same as in the header image) so that the menu items are visible. I’ve tried tutorials, youtube, and just can’t get it to work, and I’m wondering if there is something else setup wrong prohibiting it from working. I’m on a deadline, and really need some help, so thank you in advance.
Mike
https://preview.webflow.com/preview/taqtful?utm_medium=preview_link&utm_source=designer&utm_content=taqtful&preview=5fe2d83e0552515fd005128301f12d30&workflow=preview

2

menu2
menu22258×1223 228 KB

There are a few adjustments you need to make for this.

  1. Select Nav Menu White and
    make the right margin -35
    and set Max Height to 250
    and set background color to what ever you want. I chose pink here so you can see it clearly.
  2. Select Nav Menu Head and add padding right 20
  3. Select Icon and add padding right 40
  4. There may be a few more tweaks to get it just right but this should get you going in the right direction.

Adjustments will need to be made separately at each breakpoint.

Obviously you can adjust all these values to get the exact look you need.

Hope this helps.

3

BritishChap,
Thank you, but I think you missed what I need to do. In desktop mode, the menu nav bar is transparent, so the items are white on the orange image background. As I scroll down the page, I want that entire Nav Wrapper to change to an orange background so you can see the menu items.
Thank you,
Mike

4

Thanks for the clafification. I would make the Nav Wrapper 100% width and give it a height then use an interaction to animate the background color.

sdf
sdf2479×1599 86 KB

5

Thank you, and that works on the static pages, but I need it to go from Transparent to Orange when it hits the “Section - What We Do” so it’ll be in the orange header image until there, then the orange bar would appear so that you can red the menu items.

6

Actually it would go to Orange as soon as it scrolls OUT of the Head Banner Section. Does that make sense?
Thank you again,
Mike

7

You should be able to follow this tutorial but instead of using the interaction to hide and show the nav bar, you would use the interaction to change the background color.

8

Bingo! Thank you so much. Not sure how I missed that video.

Mike

1 Like
9

it has been 6 days since we heard from you. Your client decided to let you live? :crazy_face:

10

Sort of…

I’ve got an issue now where the orange bar appears when I scroll down the page, showing the menu items, however, when I scroll back to the top of the page, it’s still there, and not reverting to transparent. A little stuck on that one. Also, some of the menu items are turning blue when I scroll over their linked sections.

Thank you for any tips.
Mike