flugzeug

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…

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…

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…

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

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 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.