Transparent Header 
Autore: Peter P.
Visite 1171,
Followers 1,
Condiviso 0
Hi
Is it possible to set a transparent header so I can display a picture at the top of every webpage and display a logo and menu around 1cm from the top of each webpage. I have tried setting the header height to 150 and set the colour to transparent on both the header and header background in the template structure. When I preview the site it moves the picture down and displays the logo and menu above it. If I set the header height to 0 the logo and menu are displayed on top of the picture but pushed to the very top margin. Anyone know a way of doing this.
Kind Regards
Peter
Postato il
Maybe you can make a prtscrn or give an example of what you are trying to accomplish?
Autore
As you can see the logo and menu are both up agaist the top margin, I would like them both to come down a cm or so.
Set your menu lower in the template content section.
from so:
to this:
that's it.
Autore
The only way I have found to achieve a transparent header on the home page is to set the header to "0" in the template section, because the header is set to "0" that's why the menu keep going back to the top of the page. if I set the header to "100" and set the header colour transparent I get a clear header (see below).
The menu in the right place but the picture in pushed down below below the header, I would like the picture at the top of the page with the menu inside the picture. Is there a way of achieving this.
Peter, you could use the sticky bar
Just recreate your header on the sticky bar
In step 3 click properties for the page/s, select graphic, select header and hide.
This will force the sticky bar to immediately appear and look like your preferred example.
(with the advantage that if you need it on one or many pages (eg blog, shop) you still have a header you can use)
Peter, you wrote: "...if I set the header colour transparent I get a clear header...", this is normal! Technically if you have no color set as "Header Background" (in "STEP 2 Model / Model Structure", attention not "Header" color but "Header Background"), the transparency of the header cannot take effect and automatically changes to white. But if you assign a color to the "Header background" to make the transparency "active" then below that transparency you will see the background color and it is not equally good. If you replace the color of "Background of the Header" with an image, you should be able to get what you wanted but this image will then be visible on all pages and you will not be able to avoid a different image for each page. The procedure is this: you have to give a height, for example 500px to the Header Background and insert an image, then go to the Header and set the same height assigned to the Header Background (always 500px), all this always at " STEP 2 Model / Model Structure "(see photo below). Of course, what I explained you will have to do for each breakpoint, from the largest to the smallest...
The result is this...
If instead you want a different image for each page and the always transparent header (as in my online template: http://www.bozzasito001.altervista.org/realestate01/) then you should use extra personalized code.
Autore
Hi Giuseppe,
Your online example template is exactly what I am trying to achieve, is the code freely available to use or can you point me in the right direction.
kind Regards
Peter.
The code is freely, it's this:
<style>
#imContent {
margin-top: -150px !important;
}
#imHeader {
z-index: 3000 !important;
}
</style>
Enter it in STEP 1 / Settings / Advanced / SEO Statistics and Code / Code / Custom Code / Before closing the Tag Head.
in reference to the value -150px (negative) present in my code you must then set the height of the HEADER in "STEP 2 Model / Model Structure", with an identical but positive value: 150px. You can change the value -150px as you want (example: - 80px) to have a greater or lesser distance of the texts from the top of the screen but remember to insert the same but positive value in the HEADER! (example: 80px)
P.S. you will then have to assign the correct value of the upper margin (in the "Margins" section) to the Objects inserted in the Layout Grid in STEP 4 Pages (on each page) to avoid that these Objects then overlap the items on the menu or get too close to they.
Autore
Hi Giuseppe,
Thanks you, I think thats worked.
Kind Regards
Peter.