Transparent background for Vertical header

[9metis]

Hi,

Thanks for creating such an awesome theme! I have been unsuccessful in changing the background in my vertical menu to transparent so that the image in my page background is visible. I have tried changing it in the live colour customiser (color – header) and changing the code in my child theme CSS. Since I would like to update the theme in the future, can you please tell me what the CSS code is for changing the background in the vertical menu (for child theme)?

Thanks in advance!
Jamie

[David Martin – Support]

Hi Jamie,

Can you show a link to the site?

– David.

[9metis]

Hi David,

The site is on my local machine. I have attached screenshots of the actual site and the design or what it should look like. When I scroll up, the contents of the homepage move up but so does the background to the vertical menu. I want a transparent background for the vertical menu or get rid of altogether so that you can see the background image (as in the design).

Thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

I don’t believe that is possible, the background image does not sit behind the left header setup. Tricky without having a live/staging link.

Ex:

.vertical-header .header-wrap #header-section {
background-color: transparent;
}

– David.

[9metis]

Hi David,

I want the header background to be transparent so that the page background image shows through like this: http://joyn.swiftideas.com/home/home-multi-layer-parallax/. What I think I’m looking for is a ‘naked’ page header type in the meta options when using a vertical header menu. There is no setting for it but I was wondering if you could advise some code that will give me the same effect.

Thanks!

[David Martin – Support]

Hi,

Atelier & Joyn are not identical, did you mean to link to Joyn?

The naked header and the left sidebar header (Header no.7) are not compatible, unfortunately you would need a web developer to assist you with those modifications, as mentioned above(#222777) the background does not sit behind the left header sidebar.

– David.

[9metis]

This reply has been marked as private.

[9metis]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

That color is from the container.
Try this css.

.layout-fullwidth #container {
    background-color: #000!important;
}

-Rui

[9metis]

Thanks Rui but that didn’t work. The colour is still #222777. If you scroll down on the homepage you will notice that this panel becomes transparent. How do I make it completely transparent instead of just when scrolling down?

[Rui Guerreiro – SUPPORT]

Hi,

I added this css and it seems fine now.

.layout-fullwidth #container {
    background-color: transparent!important;
}

Let us know if it’s ok.

-Rui

[9metis]

Rui, THANK YOU, this worked perfectly!! :)))

[David Martin – Support]

Great, thanks Rui!
-David.

[9metis]

Rui sorry to bring this up again but this seems to only work on the homepage. How do I get this to work on all pages?

[Rui Guerreiro – SUPPORT]

It’s because you have this css that changes the background of the entire body.

body {
    background: transparent url("http://letriocoffee.com/wp-content/uploads/2015/10/letriocoffee_home.jpg") no-repeat center top fixed;
    background-size: cover;
}

In the other pages the page background you see belongs to the container in the right side and

Check this image where you can see the division of the menu in the left and the page content in the right side.
https://www.dropbox.com/s/o5iembbv6esr5n3/Screenshot%202015-11-03%2011.35.32.png?dl=0

The only way is creating a css similar to the one above for each page.

-Rui