[Resolved] sticky menu transparancy layer

[Ewout]

Hello,

On my website http://www.tyker-concept.nl/

i have a sticky menu header with a white transparany layer behind it created in Generatepress Elements.

It shows ok in most browsers, but only in the Edge browser, the transparancy layer isn’t shown when you scroll down…

Any ideas on how to get it also shown in Edge?

Kind regards Ewout

[Tom]

Hi there,

You have this custom CSS:

.main-navigation {
	background-color: rgb(255,255,255,0.7)
}

Try replacing it with this:

.main-navigation {
	background-color: rgba(255,255,255,0.7)
}

[Ewout]

Wauw, that did the trick.

But what realy is the difference between rgb and rgba, and why does Edge not ‘like’ it?

Kind regards,

Ewout

[Ewout]

One other question,

The logo of the website on edge seems differently placed than on Chrome etc…

I have this CSS for it:

.header-image {
padding-top: 32px;
}

But for edge it isnt inline with the menu text, wich on Chrome it is.

Hope i’m not a pain in the ass:)

Kind regards,

Ewout

[Tom]

The a makes it so transparency is supported. Chrome is smart and assumes you want it, while Edge.. isn’t as smart.

As for the spacing, try this:

.site-logo {
    float: left;
}

[Ewout]

Haha lol!

Okay, good and nice to know!

For the code snippet you gave: Huray!!!

Thanks for your time and help!

Kind regards,

Ewout

[Tom]

You’re welcome 🙂

[Author]

Posts