Transparent header menu at start
Author: Dimitrios S.
Visited 1290,
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
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.
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.
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.
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
"In the example the sticky menu has " should be "In your example the sticky menu has"
Some explanation on how to make a sticky menu depending on scrolling can be seen here:
https://webdesign.tutsplus.com/tutorials/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756
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.
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.
Author
Thank you so much guys, let us work on it and I ll let you know, thank you again
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.
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?
Yes - the sparta-example is your data I think
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.
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
Hello. For the logo in the center of the menu items, it can be done without extra code:
http://www.bozzasito001.altervista.org/nails07shop/
I show the procedure in the screenshots below, hoping you understand (My Website X5 is in Italian, I'm Italian)
2)
3)
4)
5)
6)
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...
Giuseppe... Great tutorial... Respect...
Grazie! Ciao