I am using the free versions of Elementor and Astra. We are using a Transparent Header for our website and I am trying to setup the top menu for Desktop, Tablet and Mobile modes in Appearance -> Customize -> Header -> Transparent Header -> Colors & Background -> Menu. Icons for specifying settings specific to Desktop/Tablet/Mobile modes are available for the Menu text and background colors, but making settings for one mode appears to clobber settings for other modes. The behavior seems very buggy, but maybe I am just missing something basic how to make these settings for Desktop/Tablet/Mobile. Any help is very appreciated!
Hopefully I explained my issue well. Basically, in the Transparent Header settings dialog, I can make text and background color settings for each of Desktop, Tablet and Mobile modes. The problem is, after I have made these settings I check my website and see that they are not all set correctly. In fact it seems that if I make a change to Tablet, those settings are then applied to Desktop mode as well. It feels like the settings are competing with each other in some way.
A related question: is there some other place where these Menu text color and background color settings are made? For example, where are the default colors set and do I have access to that when using the free version of Astra?
I think I've got at least part of this figured out. When I shrink the browser window down from Desktop size (large), it will go into Tablet mode (hamburger bun first appears) when window is 921 pixels wide, but at this point it is still using the Desktop background colors until the window width shrinks down to 768 pixels wide, at which point it switches to mobile colors. In between widths 921 and 768, with the desktop colors we have a white background and the menu text is also white and so the menu doesn’t show up correct. I think the following Astra post is referring to this issue: https://wpastra.com/docs/set-update-breakpoints-tablet-mobile-in-astra/. This issue may be a problem in my case because, even though I am using the newest version of Astra, the page template I’m using may be from an older version of Astra and that is why the Desktop colors are used down to width 768.
The easy solution I implemented to get rid of that unusable menu canyon between 921 and 768 was to set the “Menu Breakpoint” to 768 at the following location: Appearance -> Customize -> Header -> Primary Menu -> Mobile Menu