Hello! I am trying to recreate this header. http://lovelanai.com
How can I get the hero image to look right? I want the logo and hamburger menu to sit on top of it.
How can I center the logo?
I want the logo and hamburger menu to have a transparent background and lay over the photo, and then on the scroll, it becomes sticky and has a translucent grey/black background just like the website I provided. Is this possible?
Hello Ashely,
Thanks for writing in!
To accomplish what you have in mind, please check out this video first:
Or perhaps, you can use the header templates from our Design Cloud to get your started with the needed header layout. Check out these templates:
If you are not familiar with the Design Cloud or how you can use the header templates, please check this out:
Kindly let us know how it goes.
Hi! Thank you for the videos. Sadly every time I try to insert the adventure template, it just loads and loads and never populates. Any idea what’s wrong? I’ve tried about 6 times today.
Hello Ashely,
In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot a few common issues before we investigate your settings.
You can find the Secure Note button at the bottom of your posts
Thanks
It finally loaded today! So I’ve got the template loaded.
How can I erase the white line that is under the logo in bar 1?
Is it possible to have the bar one change color upon scrolling?
How can I make the image in the background have more height? When I erased the text on bar two it shrunk the size of the photo. I added a bunch of gap elements but I don’t think that’s the best way probably…
Hello Ashely,
You need to go the Header Bar 1 —>Container 3—> Remove the Border Bottom
It seems that you have already changed the color of the Header bar on scroll.
Since you have set the background image you need to set the custom Height of the Haeadr bar to display the complete background image or you can use the Gap element.
Hope it helps
Thanks
Thank you! Is there a way to make the header appear over the image with a total translucent background and then only have a darker grey background on the scroll, like this website: . http://lovelanai.com
Hello @RevealHM,
Please follow these steps to set the background color on the scroll
Add the custom Class(custom_header_bg) in the Header Bar
Add custom JS in the custom header JS
jQuery(document).ready(function( $ ){
var stickyOffset = $('.custom_header_bg').offset().top;
$(window).scroll(function(){
var sticky = $('.custom_header_bg'),
scroll = $(window).scrollTop();
if (scroll >= stickyOffset) sticky.addClass('on_scroll_bg');
if (scroll == stickyOffset) sticky.removeClass('on_scroll_bg');
});
});
Now add this custom CSS code under the custom Header CSS
.x-bar.x-bar-is-sticky.custom_header_bg.x-bar-fixed.on_scroll_bg {
background-color: rgba(83, 70, 70, 0.59);
}
Remove the background from the Header bar.
Please note that the code provided in the above thread serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer or you subscribe to One where customization questions are answered.
Hope it helps.
Thanks
Hi! Thank you so much for your help!
Hello Ashely,
Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns regarding our theme and theme settings.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.