Transparent and fixed Headers in the same website 
Autor: Peter P.
Besucht 1074,
Followers 1,
Geteilt 0
Hi
I’m creating a website with a transparent header so the menu and logo appears on top of a picture, it look great on desktops and tablets but looks terrible on a mobile. Is it possible to create a fixed header above the picture for the logo and menu for the mobile view only and keep a transparent menu for all the other viewpoints.
Kind Regards
Peter.
Gepostet am
HI P. Péter
Create 2 menus for one of the desktop views. The other for mobile view.
You can change the visibility of the menus when the view changes.
Desktop view: 1 menu
Mobile view: 2 menus
Autor
Hi Antal
Thank you, I have tried that, but when I add colour to the header in the template structure (480px) the header covers the top of the picture instead of going above it. Giuseppe Guida gave me the html code to add that gives a transparent header. Adding Giuseppe code gives me a perfect transparent header on all viewpoints, but I think it may be stopping me modifying the mobile viewpoint. I have pasted Giuseppe code below if anyone understands html coding.
<style>
#imContent {
margin-top: -150px !important;
}
#imHeader {
z-index: 3000 !important;
}
</style>
Peter, bye.
I read your email, I write here because the explanation could also be useful to other users.
The settings and values you assign to the HEADER in the main desktop breakpoint (No. 1 in the photo below) must also be assigned identical to the other lower Breakpoints (No. 2, No. 3 etc.) by setting only in the last 3 final Breakpoints a value of the HEADER height less than 150px (I entered 75px). Only in this way you will not have problems in the mobile view.
Regards
HI P. Péter
Which menu do you mean?
The scrolling menu can also be customized. Make the whole part as a picture. Leave the transparent parts blank or color them with the background color. Positioning the image can solve your problem at the bottom, top, center, right, ...