How do I make the header transparent? « Support Forum | Kriesi.at

Support Forum » Corona

How do I make the header transparent?

7 posts from 2 voices

Started 1 year ago by demtnman
Latest reply from Dude
This topic is not a support question

Tags:

demtnman
Member

In Corona theme, how can I make the header transparent in boxed layout, while then keeping an assigned background color to the submenu div and the main menu container?
I want the tiled body background image to continue through the header with a transparent .png logo over it. I have moved down the main menu to be like tabs on the bottom edge of the header container wrap, which I will keep a certain background color.

Posted 1 year ago #
Dude
Dude
Hey,
you can change the menu background color with:
```
#header .container.main_menu {
    background: #fff;
}
```
and the submenu color with:
```
#header .submenu {
    background: #000000;
}
```
You can add this code to css/custom.css or the quick css field.
Posted 1 year ago #
demtnman
Member

Thanks.
How about the overall header? After making these adjustments, I am left with white. I have checked Avia settings and tried
#header{ background:transparent;}

thanks in advance.

Posted 1 year ago #
demtnman
Member

It appears the header, even when assigned transparent, is inheriting the following on the minimum skin:

#wrap_all, #main{ background: #fff; }

I took out the #wrap_all from this and also kept the #header style noted in previous comment, and this worked.

Posted 1 year ago #
demtnman
Member

I need help with this now. Since the slider is called from the header, the background of the slider is now transparent. Is there any way to address this? I really would like to have the header transparent, which I achieved as above, but then when I returned to my home page saw that the slider background is now also transparent. Can I contain the slider php code in its own div or span and then assign a background color? Any help is much appreciated.

Thanks.

Posted 1 year ago #
demtnman
Member

OK. I figured out a fix. I enclosed the slider php in header file in its own div class and then added css to that class and it worked.

<div class="hero">
<?php //display slideshow big if one is available if(!empty($avia_config['slide_output'])) echo "<div class='container slideshow_big'>".$avia_config['slide_output']."</div>"; //if we dont are located on the frontpage and if there is no big slideshow availabel display breadcrumb if(!is_front_page() && empty($avia_config['slide_output'])) { echo "<div id='breadcrumb_wrapper' class='container'>"; new avia_breadcrumb(array('delimiter' => '/')); echo "</div>"; } ?>
</div>
Then I added style:

.hero{
background-color:#ffffff;
}

All appears to work. Is this an okay fix or a hack that will cause me issues? Thanks.

Posted 1 year ago #
Dude
Dude

Hey,
I think the solution is great. You shouldn't experience any conflicts, flaws, etc.

Posted 1 year ago #