Hi, thanks for reaching out.
Please, see the arrows in my screenshot: https://imgur.com/a/mY1jYS6. The arrows indicate the chosen CSS selector. Add your declaration, such as a background color, and then click the Save icon if you’d like to continue editing or the Tick icon if you’d like to exit to the basic editor. In the basic editor, you’ll be able to see your changes written to CSS.
Hi, thanks for your support, and for the screenshot. Based on that, I think I can state my question more precisely.
As in your example, I can pick a selector and add/change declarations for that selector, e.g. the background color. In fact, that would be sufficient if I wanted to make the background, say, red.
But as I make the back-ground color transparent, there seems to be something underneath that is not transparent, masking the background image of my page. And I have no idea what, or which selector, is buggering things up for me.
The only suspicion is that the color is #f9f9f9, given as background-color in the window to the right of the one with the selectors. In your screenshot, too, the background-color for the chosen selector seems to be transparent, whereas it says:
‘background-color: #fff’ in the window on the right.
So how can I identify the selector giving me trouble; and where do the declarations in the window on the right come from?
I hope my questions make sense.
Hi
So how can I identify the selector giving me trouble;
In this instance, you’d need to a good understanding of HTML and CSS to locate the selector.
and where do the declarations in the window on the right come from?
The selectors in the bottom panel are from the page source.
Please, send a link to the page you’re working on, and we’ll take a look.
The page I’m working on is auf-kante.de
The issue arises in mobile view (i.e. small width window). In that case the primary menu is a dropdown, and the links are white text on white background.
The selectors in the bottom panel are from the page source.
In addition to the selectors, there are CSS declarations in the window on the bottom right. The declarations shown change with the selector that I pick. However, they do not seem directly correlated with the picked selector, as I can change, say, the background-color of the selector; but the background-color in the bottom right window does not change accordingly. I’m puzzled.
Hi, thanks for the link.
You can adjust the mobile menu link colors as follows:
.ast-header-break-point .main-navigation ul .menu-item .menu-link {
border-color: #000;
color: #000;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg.ast-close-svg {
fill: #000;
}
Astra theme support would probably be in the best position to assist with color changes if you aren’t able to locate the appropriate selector with SiteOrigin CSS. We can assist directly with Custom CSS within our premium support scope where we have the budget to do so.
Regarding the bottom panel. The left pane at the bottom displays available CSS selectors found in the selected HTML. The pane on the right shows declarations linked to the chosen/selected selector.
Please, find a quick screenshot description here: https://imgur.com/a/JF91giZ.
Hope that helps.
If you’re unable to make a particular change with SiteOrigin CSS, you can perhaps check if Astra has an available setting or if theme support can lend a hand.
Kind regards
Andrew
I had tried those selectors to no avail. So I assume the challenge is–as you say–to dig into the whole thing to find the right selector. (I am a newbie, and still test-driving before committing to premium versions of SiteOrigin CSS and Astra).
Regarding the declarations on the right, I am still puzzled, though. They very much do not seem to be associated with the chosen selector:
The first screenshot has background-color black (#ffffff) for the chosen selector. However, the right hand pane says: background-color: #f9f9f9. Doesn’t matter, as I can make the background black. link: https://imgur.com/a/FB4DQ1V
However, the second screenshot shows my problem. I can make the background for the chosen selector transparent, but something else is masking the image. And, again, the declaration in the right hand pane does not match the chosen selector. What is going on? link: https://imgur.com/a/ggiI9WI
Hi, thanks for your reply.
The declarations in the right panel are the available declarations for the chosen selector, excluding your custom CSS. Your Custom CSS values won’t appear in the right panel; only the original value will. Hopefully, this helps to understand what you’re seeing.
Please, write your change to Custom CSS by clicking the tick icon. I can then take a look and see where the issue is. At the moment, a change for the mobile menu background color isn’t present in your Custom CSS.
The background-color field doesn’t have a transparent option at the moment. In the following screenshot https://imgur.com/a/ggiI9WI, if you click the tick button, there won’t be a value to write to Custom CSS.
transparent is a valid value for the background-color property:
https://www.w3schools.com/cssref/pr_background-color.asp
You can select any color, save the change to Custom CSS and then change the value from the color you’ve chosen to transparent.
Regardless, please, save your changes to Custom CSS and I’ll take a look.
Thanks
Andrew
I have now chosen red as background color.
(The code is:
.main-header-menu.ast-nav-menu.ast-flex.submenu-with-border.astra-menu-animation-fade.stack-on-mobile {
background-color: red;
}
)
The red color show is showing, when going to mobile view, i.e. a narrow browser window. Just the same, I can type transparent, and it does save as custom CSS code. But I can’t see it, presumably because there is something else underneath it, that is opaque…
Hi
The background color showing behind the mobile menu background color is added by the following selectors:
.ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content
Kind regards
Andrew
CSS go home, you’re drunk.
Tried the above, to no avail; and I have tried more to home in on what’s going wrong:
I made the background red with:
.main-header-menu .menu-item {
background-color: red;
}
Next, I can add:
.page_item.page-item-106.menu-item {
background-color: X;
}
If X=blue, then one of the links is blue.
But if X=transparent, then said link is white. What’s going on? Why would this link be red, but if I slap on a transparent background, then it becomes white? I have no idea…
Hi, thanks for the update.
Ideally, theme support would be assisting with this theme-related customization. If you have any queries about the basic usage functions of SiteOrigin CSS, for example, the discussion we had about selectors and declarations, we can certainly assist within our free support scope.
Try removing your rules added for the menu and add the following:
.ast-mobile-header-wrap .ast-mobile-header-content, .ast-desktop-header-content {
background: rgba(255, 255, 255, 0.8);
}
.ast-header-break-point .main-header-menu {
background-color: transparent;
}
.ast-header-break-point .main-navigation ul .menu-item .menu-link {
border-color: #000;
color: #000;
}
[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg.ast-close-svg {
fill: #000;
}
That’ll add a slightly transparent mobile menu background with black links. I hope that helps as a starting point. You can set the 0.8 value to 0 if you want the background to be fully transparent. Unfortunately, I can’t assist with this customization much further but if you have any basic usage questions about the plugin, I’d be happy to help.
Thanks again.
Andrew
OK, I guess what I did is make all links blue; then one of them transparent, so it’s not blue anymore; answering my previous question.
So the task is to identify all objects underneath the menu links, and an associated selector…
Thanks for the update.
If queries about the SiteOrigin CSS interface or functionality arise, please, let us know.
Kind regards
Andrew
