Slider Rev / with Menu & Logo on top Transparent

Support
#1

How can i make it so the home page slider has this transparent menu + Logo and then its a sticky header and I can choose the header color ?

Here is a site using this

#2

Hi there,

This would involve some custom CSS. I checked your licenses and you have several websites.

Would you mind providing the URL of the site you’re working on so that we can assist you further?

Thank you.

#3

i added secure note above

#4

Hi again,

Thanks for the update. Please add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent");
		}
	});
});

As you see this requires custom development and the code provided above 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.

Thanks!

#5

Ok it kind of worked but 100%, what settings do I need to turn off from the editor for the header? please see the link above in secure note for the link to see what happen. all pages are not like I was hoping. how can I do this

#6

Hi there,

Please set the top padding of the first section on the homepage to 0.

Then go to X > Theme Options > Header then set Navbar Top Height (px) to 130 then add this code in the Global CSS:

.masthead {
    position: absolute;
    width: 100%;
    top: 0;
}

Hope this helps.

#7

Finally got it after reading your reply 5 times , Thanks

#8

You are most welcome. :slight_smile:

#9

How can the header be sticky on mobile as well. It only works on computer and how can I center it on mobile.

Thanks

#10

Hi There,

I’ve just checked on my iPhone and the head sticky now:

Could you please send us with a screenshot how it looks on your end?

Thank you.

#11

Mine looks the same, I was thinking it would be cool if the logo was in the black area that would be nice.
Is this possible ? I just was able to center it by increasing the size that part is ok now… see this link.

Thanks

#12

Hey There,

To make the navbar fixed on the mobile, please add this custom CSS:

@media (max-width: 979px){
    .x-navbar.x-navbar-fixed-top {
        position: fixed;
        top: 60px;
    }
}

It’s not possible, as the black area is coming from the SuperFly Menu plugin.

Regards!

1 Like
#13

are you saying the plugin is blocking this feature ? because I see it at this site

when I look up on my phone

#14

Hi there,

The site you’re comparing has different setup that your site. We’re saying that it’s not possible since the SuperFly plugin is different than the navbar where the logo is. Your ideal site doesn’t use SuperFly, but custom one.

Thanks!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.