Need help fixing a broken menu on site (CSS issues)

[sovidiu]

Hello everyone,

I have this Wordpress staging website at https://ae.praia.studio and the top menu is broken, you see. It’s supposed to have white links (because the backgound of the page is dark) and then, when the menu is on a white background, the links would turn black.

The same rule applies to the top left logo: I have two versions of the logo (one is with black writing, the other one is with white writing) in the theme. When the background is white, the black logo would be shown, and the other way around.

The site is running on Wordpress and the template is called Mies LT by Pixelgrade (based on the Anima theme by Cryout Solutions).

I don’t know what tf is going on but that top menu is working fine only when using a Gutenberg plugin version 1.5; a newer version of that plugin causes the menu & logo to go crazy.

Do you have any suggestions or could you help, please?

Many thanks!

[ralphm]

Hi @sovidiu. Welcome to the SitePoint forums.

It’s a bit hard to understand what you’re asking here.

It’s supposed to have white links

So the page you’ve linked to does have white links, and doesn’t look broken to me.

when the menu is on a white background, the links would turn black.

How would they do that? Is there some code that’s supposed to determine that? Is it not working? Is there a page that demonstrates this?

[sovidiu]

Good morning, Ralphm!

Thank you for the greeting & for your message.

To address your notes:

1. this is the demo site: https://starter.pixelgrade.com/mies-lt/

When you land on it, the links in the top menu (home, work, profile etc.) are white.

(I made screenshots & placed them all into one photo because I cannot embed more than one / new user here).

A. So the logo is foxed: it needs to be the one with white letters (on transparent or dark background) or the one with black letters (whenever it sits on a white background).

B. The top menu is foxed, too.

I can give you admin access to it or, if you know someone who can fix this – even on a paid freelance basis – please let me know

[PaulOB]

On https://ae.praia.studio/ I see this:

No scroll:

When scrolled:

That doesn’t match up with your screenshots but seems to be what you want?

Assuming you haven’t already fixed the issue of course

[sovidiu]

Hello Paul,

Thank you for the reply.

That logo should be with white letters, so that’s broken.

In Chrome it shows fine, you are right. In Firefox, it still shows those black letters in the menu instead of the white ones…

If I pay you for this, can you login to the site and see where the problem is, please?

[PaulOB]

Sorry I don’t do wordpress and that simple effect is way too complicated with all those theme changes for me to get involved.

It looks like you are missing the routine that adss the sm-dark and sm-light classes dynamically on header change. You do seem to be adding an sm-variation12 class so you could try utilising that for your change.

e.g.

.sm-variation-12 {
    --theme-logo-default-opacity: 0;
    --theme-logo-inverted-opacity: 1;
    --theme-logo-default-filter: grayscale(1) brightness(10)
}

No Scroll:

Scrolled:

However I don’t know if that breaks everything else

Sorry.