WebSite X5Help Center

 
Peter P.
Peter P.
User

Transparent and fixed Headers in the same website  en

Author: Peter P.
Visited 858, Followers 1, Shared 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.

Posted on the
4 ANSWERS - 1 USEFUL - 1 CORRECT
Antal Z.
Antal Z.
User

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

Read more
Posted on the from Antal Z.
Peter P.
Peter P.
User
Author

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>

Read more
Posted on the from Peter P.
Giuseppe Guida
Giuseppe Guida
User

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

Read more
Posted on the from Giuseppe Guida
Antal Z.
Antal Z.
User

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, ...

Read more
Posted on the from Antal Z.