I’ve been struggling with this for the last while or so. I’m very new to Webflow and learning more every day - all I want to do here Is make the the background here white like the rest of the page - it changes to green like this when I click it and make the menu drop down. I checked the menu button and icon styling, pressed state and focused state, and don’t see any color styling. I’m not sure how to check it’s active state if it has one.
It’s difficult to guess where your problem is without seeing the site directly, through a designer link.
That said, here are a few things that will help-
- Clicking on the canvas to select the element you want to work with is good, but you will often need to refine exactly what you have selected using the left-side element hierarchy. Make sure to have that expanded. Click the parent and child elements to see where the color setting might be applied. As you select items in the left-side nav, you’ll see the focus rectangle change on the canvas, which gives you a pretty good idea of whether you’re in the right area.
- Start working with Desktop breakpoint first ( top center selector above the canvas ). Once that looks the way you want, switch to tablet, phone-landscape, and phone-portrait to make device-specific adjustments.
- In navigation, there are often fairly major differences in presentation between the desktop and mobile views. It’s likely you’ll style the pop-up “hamburger” menu quite differently. Largely, you’ll rely on the left-side menu to select the exact nav element part you need.
- Often, I find that on some elements you have to set the color your want, even if it’s the color it should already be inheriting. I’d try setting it to e.g. white, even if you think it’s already supposed to be inheriting white.
- Get the basic non-hover, non-active styling you want first, and then add hover and active styling as desired to override that. Those states are selected top-right, using the little drop-down selector next to the class name. Watch all the videos on classes and compound classes to make sure you understand how this works, or you’ll struggle until it “clicks.”
- Sometimes, navs are complex- especially if you have a sticky nav, a top nav, a mobile nav, etc. Don’t be afraid to create a Draft-mode page just for configuring and styling all of your navs in one place, where you can see them all, and work with them all more conveniently. I make it a point to do this for complexly-styled elements like navs and richtext elements.
2 Likes
Here is a link to the site - https://preview.webflow.com/preview/camerons-dandy-site-a99e9-98cad8f7fa0f8?utm_medium=preview_link&utm_source=designer&utm_content=camerons-dandy-site-a99e9-98cad8f7fa0f8&preview=7e9aa55ef5b30b8460d71af383df8dd5&workflow=preview
I tried your suggestions, including changing the color of all states to white, and selecting all the elements in the left nav, but no dice. If you could take a quick look and try to see what the problem is I would heavily appreciate it, including the time you’ve already given! Thank you.
Found it-
You have the background set to dark slate gray on the button element, but only in mobile view and only when the menu is Open. Sometimes these things are tricky to find, here’s a Loom showing you where it it.
1 Like
Thank you SO MUCH! You are the best! This support community has made a hell of an initial impression to say the least.
1 Like