[Resolved] Transparent slide-out menu

[Piccia]

Hello there,

How do I get the menu transparent? I am using the slide-out menu only, with no header. I know that there’s a way when using the Page Header, but I can’t do that. I’ve tried this CSS:

.main-navigation, .main-navigation ul ul {background-color: transparent !important;}

.inside-navigation .grid-container .grid-parent {background-color: transparent !important;}

But neither work. I have also tried using rgba so I could use transparency but that doesn’t work, either.

I would be grateful for any help!

[Piccia]

Actually, I think that the menu might in fact be transparent. The reason why it seems to not be working is because the whole site has the annoying padding problem that I cannot identify, se my other thread.

[Leo]

Hi there,

Yup the slideout navigation is already transparent.

If you are using the most recent version (for now) of GP premium 1.2.94, the background color options have transparent options so you don’t have to use CSS 🙂

Just answered your other thread.

[Piccia]

Ah, that’s great! Do you mean global background options? Or specific to the menu?

Just updated the other thread.

Thank you very much

[Leo]

The background color options for all the elements (menu, sidebar, content etc) should have transparent options now 🙂

[Piccia]

Ok that’s brilliant. However, in that case it would be a case of pushing the image up so that it sits underneath the menu. I know that I can do this with the Page Header, but I’d rather not (it would mean a lot of extra work coding the html for the various elements that I want to sit on the image). Is there an easy CSS workaround for this?

Thank you Leo

[Leo]

Sorry what? changing the background color shouldn’t change your layout?

[Piccia]

Sorry, didn’t explain myself well.

I’ve just realised I’ve asked the wrong question.

What I mean is the header menu. The menu that’s at the top of the page: I would like it to be transparent and sit on the top of the image. Right now it can only have the background colour. If I set the background to transparent it will just go white.

Is this clearer?

Thank you!

[Leo]

Try this:

.main-navigation {
    position: absolute;
    width: 100%;
    left: 60x;
}

Let me know if this is what you meant.

[Piccia]

Love it! Exactly what I wanted!

Liking GP more by the minute.

Thank you Leo.

[Leo]

You’re welcome!

[Author]

Posts