Header and menu transparent on home page

PrzemyslawGumulka · July 2018

Is it possible somehow to set two options from muffin options (transparent header and transparent top bar with menu) only on the home page? Link: https://niechzyja.psubraty.pl/. I noticed that the body has two additional classes when set to transparent: "tr-header tr-menu".

If not, it could even stay transparent for the whole page, but when I set to transparent, my header gets bigger on all the pages. I set it to minimalist and would like to keep it this way.

So, I can achive my goal in two ways:

1. Set transparency only on homepage

2. Make header minimalist on subpages with transparency on

Pablo · July 2018

Hi,

Almost all of what you ask can be done with Custom CSS.

Minimalist cannot be set only for few pages, sorry.

This will make all your pages transparent, if you want make it only for

Only Homepage, add before #Header a 'body.home'

#Header #Top_bar{
background:transparent !important;
	box-shadow:0px 0px 0px !important;
}

Thanks

PrzemyslawGumulka · July 2018

Unfortunately, it doesn't work. As You can see on: https://niechzyja.psubraty.pl/, the slide on home page doesn't fit one page. When I set transparent header and transparent top bar with menu in muffin options, it fits perfectly (the progress bar on the botton is at the very bottom of the screen when scrolled up to the max)

Pablo · July 2018

You have to edit your slider, disable "falling" effect and turn off header minimalist to be able to make this effect works fine.

The biggest problem makes this background effect

Thanks.

PrzemyslawGumulka · July 2018

ok

Pablo · July 2018

Sorry, my answer was not quite helpful, I changed it to be more understandable.

Cheers.

PrzemyslawGumulka · July 2018

I have to come back to this problem. The answer from the 9.July doesn't work in my case. You suggested the following css:

#Header #Top_bar{
background:transparent !important;
	box-shadow:0px 0px 0px !important;
}

I checked and it works in some header layouts, but not in "Classic". With this css, classic header layout and all the transparency options turned OFF in muffin menu - i get header in a color set in header colors in muffin menu. And a transparent sticky menu. That's exactly opossite to what I would like to get. I need transparent header on home page (but non-transparent sticky). And non-transparent on all other pages. When I change to (for example) fixed layout: header is fully transparent.

I managed to get more or less what I need (example: https://niechzyja.psubraty.pl/) by using following options:

- minimalist header ON

- transparent header OFF

- transparent top bar with menu ON

- custom CSS:

#Top_bar {

opacity:1 !important;

}

body.main #Header #Top_bar{

background:transparent !important;

box-shadow:0px 0px 0px !important;

}

But one thing is still wrong. And it applies to standard betheme, without an costom css. Whenever you set transparent top bar with menu ON, the minimalist header doesn't work! Why is that? What's the connection between transparency and size of the header? I need the minimalist header, so please help me in one of two ways:

either 1) fix custom css to make header (but not sticky) transparent in classic layout. Then I would be able to turn off top bar transparency and minimalist header should work again
or 2) provide custom css to fix the minimalist header

Here is how the header looks like currently (very high): https://ibb.co/hEQ3eJ
Here is how it should look like (after turning top bar and menu transparency OFF): https://ibb.co/n4K1Yd

It the top bar and transparency is not possible with minimalist header (but why?), it should be declared in this option description. There is only one note now: "Does not work with Header Below. Header Creative requires background image uploaded above."

Pablo · July 2018

This Custom CSS will make your header a little bit shorter, what you wanted to achieve.

.tr-menu.header-classic.minimalist-header:not(.template-slider) #Header{
	min-height:90px !important;
}

Thanks

PrzemyslawGumulka · July 2018

it works, thank You. I really would like minimalist header independent from transparency options. Please, think about it.

Header and menu transparent on home page

Comments