WebSite X5Help Center

 
Dimitrios S.
Dimitrios S.
User

Transparent header menu at start  en

Autor: Dimitrios S.
Visitado 1330, Seguidores 2, Compartilhado 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

Publicado em
22 RESPOSTAS
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.

Ler mais
Publicado em de 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.

Ler mais
Publicado em de 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.

Ler mais
Publicado em de John S.
Dimitrios S.
Dimitrios S.
User
Autor

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

Ler mais
Publicado em de 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.

Ler mais
Publicado em de 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.

Ler mais
Publicado em de John S.
Dimitrios S.
Dimitrios S.
User
Autor

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

Ler mais
Publicado em de 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.

Ler mais
Publicado em de John S.
Dimitrios S.
Dimitrios S.
User
Autor

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?

Ler mais
Publicado em de 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.

Ler mais
Publicado em de John S.
Dimitrios S.
Dimitrios S.
User
Autor

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

Thank you again

Ler mais
Publicado em de 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)

Ler mais
Publicado em de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

2)

Ler mais
Publicado em de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

3)

Ler mais
Publicado em de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

4)

Ler mais
Publicado em de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

5)

Ler mais
Publicado em de Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

6)

Ler mais
Publicado em de 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...

Ler mais
Publicado em de Giuseppe Guida
X5 Croatia
X5 Croatia
User

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

Ler mais
Publicado em de X5 Croatia
Giuseppe Guida
Giuseppe Guida
User
X5 Croatia
Giuseppe... Great tutorial... Respect...

Grazie! Ciao wink

Ler mais
Publicado em de Giuseppe Guida