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.
hi @DAGHERs alI see is that all works as how you have set it up.
There is no color! You have transparent background with backdrop filterblur: 5px.
So what background color you are talking about?
@Stan thanks for the support. 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.
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.
@Stan Thank you for your time.
Ok I will try to reformulate my question in the request, thanks.
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.
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 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.
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. 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.
@Stan I think youāre right.
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.