Archived topic

sticky menu transparancy layer

6 replies · Started by Ewout on September 4, 2019

Viewing posts 1–7 of 7

September 4, 2019 at 5:12 am #1000729

Hello,

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

September 4, 2019 at 11:54 am #1001150

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)
}

September 4, 2019 at 2:50 pm #1001244

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

September 4, 2019 at 2:54 pm #1001245

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

September 4, 2019 at 5:13 pm #1001284

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;
}

September 4, 2019 at 5:21 pm #1001290

Haha lol!

Okay, good and nice to know!

For the code snippet you gave: Huray!!!

Thanks for your time and help!

Kind regards,

Ewout

September 5, 2019 at 9:09 am #1001892

You're welcome :)

This archived topic is closed to new replies.