WebSite X5Help Center

 
Dimitrios S.
Dimitrios S.
User

Transparent header menu at start  en

Author: Dimitrios S.
Visited 1034, Followers 2, Shared 0  

gddchapuy.com 

It starts with a transparent header menu, displayed over the picture. 

I want to do the same. I try:

2 => template structure

header background color = transparent, height=65

header color = transparent, height= 65

The result is white.

Any ideas? 

Thank you guys

Posted on the
22 ANSWERS
John S.
John S.
User

You could use no header.

Use a page-menu you make transparent.

The background image should then be in row-settings for both the menu and then also for the following row.

The menu will disappear by scrolling.

Read more
Posted on the from John S.
Esahc ..
Esahc ..
Moderator

Dimitrios, the easiest way to achieve this is the sticky bar. Build your sticky bar with menu as described (step 2 sticky bar). You will need to turn the sticky bar on (display upper bar) for every resolution.

In step 2 template content remove all content from the header. In step 2 template structure set the height of the header to zero. This should force the sticky bar to always be visible (set it as 1 if you wish it to appear after any mouse movement)

Please let us know if that works the way you require.

Read more
Posted on the from Esahc ..
John S.
John S.
User

I have an example here: https://bramminginfo.dk

It is much like Esahc suggest. Only I have not made the sticky menu total transparent.

And the sticky menu is visible always - not only when scrolling upwards.

In the example the sticky menu has white background and is only visible on scrolling up.

The thing with the visibility only by up-scrolling, you have to make by special code.

Read more
Posted on the from John S.
Dimitrios S.
Dimitrios S.
User
Author

Thank you both guys. 

The thing is, we want to make it as in gddchapuy.com , at start to be transparent, at scroll down to be white (since there are pictures etc)

Is this possible? 

Thank you again so much

Read more
Posted on the from Dimitrios S.
Esahc ..
Esahc ..
Moderator

Yes, do as indicated by John and have a sticky bar with white background.

But sticky bar will appear very quickly depending on how much gap you are prepared to have in the empty header.

Read more
Posted on the from Esahc ..
John S.
John S.
User

If you want the menu to be transparent at start and then turn white when scrolling down the page, you just use no header.

You make the page with a page-menu in top, and then a background image in row-settings for the first 2 rows (the menu and the following empty object).

Then you have a sticky menu where the background is white.

This will do:

First you see the image filling the whole screen, and then on top of the image you see the transparent menu.

When the user starts scrolling, then he will see the sticky menu with the white background.

Read more
Posted on the from John S.
Dimitrios S.
Dimitrios S.
User
Author

Thank you so much guys, let us work on it and I ll let you know, thank you again

Read more
Posted on the from Dimitrios S.
John S.
John S.
User

The problem is the image. I guess you want to have it to go to the top.

Maybe you could use a background image for the home page.

Or maybe do something like this: http://eksempelsite.dk/sparta02/

Here I have the menu starting down the page and then it gets sticky when it reaches the top.

Read more
Posted on the from John S.
Dimitrios S.
Dimitrios S.
User
Author

Thank you guys. It is actually working! 

One thing is missing: gddchapuy.com, there is the logo (D) in the center of the "header" (menu item, with white lines over transparent). At scroll down it "becomes" the sticky bar (black over white background)

How can I insert a logo in the center of the "header"

Thank you again 

P.s.John, we have talked in the past, right?

Read more
Posted on the from Dimitrios S.
John S.
John S.
User

Yes - the sparta-example is your data I thinkwink

The diamond in the middle is not possible without using special code. You could make it by placing a hamburger menu to the left and then a png-image in the middle. But then you cannot have the row full-width. It has been a wish from really many people that this should be possible.

For the sticky menu it is also not possible - but it could be done bu using special code.

As an alternative:

You could have an icon or image in the second row. It could be made sticky using code. This would be rather simple.

Read more
Posted on the from John S.
Dimitrios S.
Dimitrios S.
User
Author

Thank you John, we got what you are saying. We are also wishing (as many people) that it should be possible

Thank you again

Read more
Posted on the from Dimitrios S.
Giuseppe Guida
Giuseppe Guida
User

I show the procedure in the screenshots below, hoping you understand (My Website X5 is in Italian, I'm Italian)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

2)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

3)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

4)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

5)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

6)

Read more
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Of course, at lower resolutions, where you decide to bring up the hamburger menu, go to hide menu 1 and menu 2 visible in the desktop view and insert the hamburger menu in their place...

Read more
Posted on the from Giuseppe Guida
X5 Croatia
X5 Croatia
User

Giuseppe... Great tutorial... Respect...

Read more
Posted on the from X5 Croatia
Giuseppe Guida
Giuseppe Guida
User
X5 Croatia
Giuseppe... Great tutorial... Respect...

Grazie! Ciao wink

Read more
Posted on the from Giuseppe Guida