How can I only show the Nav Menu BG Color on the Mobile Breakpoint? šŸ˜­

Hello Webflow Experts.

Iā€™m struggling with how to only define a background color for the nav menu on mobile.
Iā€™ve set the bc color to transparent for all other breakpoints as you might see on the editor image.

On the public site though, the background color is still visible.

Does anyone knows a way out? :smiling_face:
Any hint / help would be much appreciated. :rose:


Here is my site Read-Only: WEBFLOW LINK
(how to share your site Read-Only link)

1 Like

hi @DAGHERs alI see is that all works as how you have set it up. :man_shrugging:
There is no color! You have transparent background with backdrop filter blur: 5px.
So what background color you are talking about?

@Stan thanks for the support. :star_struck: Exactly, there shouldnā€™t be any color, right?
If you toggle dark mode (in preview, and on a bigger Breakpoint), the unwanted BG Color on the Nav Menu is even more visible. :sob:

ok @DAGHERs firstly in your initial request you didnā€™t mentioned that issue is related to color mode switcher so I didnā€™t know there is any switcher at all.

Now, when you have cleared your request, please revisit how you have set your animation where I have easily found (I hope) from where your black color is coming from.

1 Like

@Stan Thank you for your time. :bouquet:
Ok I will try to reformulate my question in the request, thanks. :sweat_smile:

True, that specific Element provides the additional BG Color to the Nav Menu (the one I want to remove). Yet removing that parameter all together (or setting the color to transparent), also removes the BG Color from the Mobile Breakpoint (Making the Menu unusable on Mobile).

From what Iā€™m able to process, the Class ā€˜Nav Menuā€™ gets (naturally) used on all breakpoints.
For instance, setting the ā€˜Nav Menuā€™ Class on Display None on above Mobile, also yanks it out for Mobile.

So I donā€™t know how to change the BG Color on all other Breakpoints, but for the one on Mobile. :sleepy:

hi @DAGHERs unfortunately this double condition is AFIK not possible create with simple functionality WF UI offer. You will have to use custom JS (or CSS) to check two condition to make request TRUE.

conditions check model:
IF (dark && mobile ?? landscape){
navigation background color === black
}

or something similar

Keep in mind that you should check condition if is mobile device AND in landscape. If you omit these condition result will work on also desktop as today devices have resolution as standard displays only pixels are ā€œsmallerā€. It is something you can discover more about if you would like to.

@Stan thanks so much for the advice. :sparkles:
This stuff is way out of my League.

:melting_face:

@Stan How about placing an object underneath and right under the Nav Bar.

That Object, on all other breakpoints, would have the height of 1 px. But only on Mobile Portrait, once the Menu Button is pressed, it would grow to match the Nav Menu background. Giving it the additional (missing) color. :thinking:

Would such a condition be simpler?

hi @DAGHERs you can try and share if you have succeed with this creative solution. There is always 100 ways how to achieve identical or similar effect. :man_shrugging: IMO you do overcomplicate such simple element like Nav as this change does not bring to user any benefits. From UX point of view any element should be consistent across viewports when it will come to color. :man_shrugging:

@Stan I think youā€™re right. :trophy:
Iā€™ll guess Iā€™ll just pass on the transparency on the Nav Menu entirely, since I canā€™t code.
And itā€™s obviously not as configurable as I wish it would be. Iā€™ll keep it simple.

Thanks for all your time.
I see you are quite active with sharing your knowledge with the community.

Thanks for Rocking! :guitar:

1 Like