-
Hi Support,
My client (amdale homes) has requested a specific look to their website. I’ve searched the forum for help but can’t find what I’m looking for. They have requested the top header to be like the following website… https://www.mccleandesign.com/
They want the header blended into the page image (It also has a subtle background graduated fade downward over the image, it’s more apparent when you click on ‘Book’ page). Then upon scroll.. the header becomes smaller with a far darker transparent background (not graduated) with a subtle drop shadow on the bottom.Many thanks for your help in advance.
Jon -
Hi there,
from a new install the basic steps are:
1. Appearance > GeneratePress activate the Menu Plus and Elements modules.
2. Customer > Layout > Header, check the Navigation as Header Option.
3. Customizer > Colors > Primary Navigation , here you should set the colors your require when the nav is sticky.
4. In Appearance > Elements Create a Header Element to merge the site header with the top of your content, as well set the nav / header colors to transparent:https://docs.generatepress.com/article/transparent-header-and-navigation/
5. Optional – add a Block Element Page hero where required to add hero sections for the merged effect , otherwise it will merge with the top of the content
-
Hi David, I had already set out the website with pages and a menu etc, so not sure if that’s why it’s not working but I did all you said and I’ve lost the menu completely. I’m using elementor pro, does that change things?
-
If you’re using Elementor Pro to rebuild the site header then yes, that would replace the themes header.
If you want to share a link I can take a look to confirm it.
-
Oh, just noticed I’ve lost the footer too? I’m only just starting out on this job so not a big deal the site isn’t live
-
If you’re using Elementor Pro to rebuild the site header then yes, that would replace the themes header.
If you want to share a link I can take a look to confirm it.
-
No im not using elementor pro to change any header settings, I always just use that for editing the pages. I’ll disable the Maintenance setting now so it’s accessible David. The url is..
Many thanks
-
So theres nothing of the themes templates being used there.
It looks like ( what used to be called ) the Elementor Canvas template, which basic strips all the theme elements out . -
I just use generatepress child as the theme, I only use elementor to edit the main page. I use generate press to create the header, footer and menu. Since doing the steps above I’ve lost the header and footer. I’ve tried to undo it and still can’t get back to where I was, I’ve now tried doing it again but still nothing.
-
The steps I provided above wouldn’t remove any of the themes parts.
See here:https://app.screencast.com/pYqSaA5Lcy3Ue
There is none of the themes HTML on the page, its all Elementor, and the body class of
page-template-elementor_canvastells me its loading Elementors Templates.And thats not something the theme can do. So if its not a setting in elemntor that been checked then it must be something in their code
-
Very strange, I can’t get a header or footer back using customiser, I had it all set up with the menu and pages all working fine. I think you’re right, it could be an elementor thinf I’ll have a good look at it again tomorrow, worst case I think I’ll have to delete the site and start again. I’ll let you know how I get on David, thanks… Jon
-
Let us know if you find what was causing it
-
Hi David, I managed to resolve the problem. You were right, the main page was set to elementor canvas and not elementor full width, my wordpress ‘edit page’ layout has changed, I think maybe due to either the elements module being added so I can no longer see the options on the right hand side to disable title etc and the elementor canvas selection has moved. Anyway I figured it out. I got the transparent header working now. The only issue now is how would I have the background of the first main header being faded like a graduation downward from a dark transparent to lighter? (like https://www.mccleandesign.com/). Also when scrolling back up the after viewing the site and the sticky header being present, the transition from sticky header to original header when hitting the top of the page is rather ‘clunky’, can the first original header fade in on appearance at all? So the transition from sticky to normal header is smooth? again like https://www.mccleandesign.com/
I’ve taken maintenance mode down so you can view what I mean,Many thanks
Jon -
Can you re-share your site link?
-
Morning David, yes of course.. the link is amdalehomes.com
Many thanks
Jon -
Morning Jon 🙂
For the gradient background for the ( non-stick ) nav, add this CSS:
.sticky-enabled .main-navigation:not(.is_stuck) { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 90%); }Note the 90% is the position at which the full transparent color is reached.
For the Sticky nav transition, in the Customizer > Layout > Sticky nav have you tried he No Transition or Fade options ?
- You must be logged in to reply to this topic.