Header Menu Image

Support
#1

Hi X,
i need a help to make this like example images:

1 - How to put image over top menu
2 - When scrolling down how to make menu with white background

#2

Hi There,

First, please you have to set the background image for the first section.

It could be done by the custom JS & CSS. Would you mind providing us with your website URL so we can take a closer look?

Thanks.

#3

Hi, i sent you a PM with details. Web site is under construction.

#4

Hi There,

The password is incorrect. Could you please double check?

BTW: You can send us your credentials via the Secure Note button.

Thanks.

#5

Hi There,

Thank you for the credentials.
Please try to remove the following custom CSS:

.home .x-navbar.x-navbar-fixed-top {
    background: #fff;
}

Go to Theme Options > Header > Navbar > Navbar Position: Choose Fixed Top. This settings will make it fixed on top on scroll.
Add this custom JS on Theme Options > Global JS.

(function($){
  	var H = $(window).height();

	$(window).scroll(function() {

	  if ( $(this).scrollTop() >= 300 ) {
	    $('.home .x-navbar').css({ 'background-color': '#ffffff'});
	    $('.home .x-navbar .desktop .x-nav > li > a').css({ 'color': 'red'});
	    $('.home .x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/wine.png');
	    
	  } else {
	     $('.home .x-navbar').css({ 'background-color': 'transparent'});
	     $('.home .x-navbar .desktop .x-nav > li > a').css({ 'color': 'green'});
	      $('.home .x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/logo2.png');
	  }

	});
})(jQuery);

1.) On this line of code if ( $(this).scrollTop() >= 300 ) { change 300 to your preferred scroll value where you want the changes to happen.
2.) This line $('.home .x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/wine.png'); change the source of your logo image. Change to your preferred image URL. I have added that because your default image is white. On scroll, once the background of the menu is white, default logo is not visible. Set another image that is visible.
3.) This line $('.home .x-navbar .desktop .x-nav > li > a').css({ 'color': 'red'}); changes the color if your link after scroll. Change to your preferred color.
4.) The code inside the else statement is the value you go back to when we go back to scroll top. Change those values accordingly.

See this screencast as sample implementation: https://screencast-o-matic.com/watch/cFeuVDDgxK

Further customization from here would be getting into custom development. You might need to consult a web developer after this. Thank you for understanding.

#6

Thanks Lely,
it works for homepage, nice work, very well detailed.
For the other pages is not working like in homepage, because of breadcrumb, i think.
I´ve added a test image to “Services” page but no success, as you can see in the attached image. What can be wrong?

#7

Hi There,

Yes, that is because the code provided is only intended for the home page. If you need it to affect all the pages, please remove all the .home reference from the code.

CSS

.x-navbar.x-navbar-fixed-top {
    background: #fff;
}

JS

(function($){
  	var H = $(window).height();

	$(window).scroll(function() {

	  if ( $(this).scrollTop() >= 300 ) {
	    $('.x-navbar').css({ 'background-color': '#ffffff'});
	    $('.x-navbar .desktop .x-nav > li > a').css({ 'color': 'red'});
	    $('.x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/wine.png');
	    
	  } else {
	     $('.x-navbar').css({ 'background-color': 'transparent'});
	     $('.x-navbar .desktop .x-nav > li > a').css({ 'color': 'green'});
	     $('.x-navbar .x-brand img').attr('src','//jadoreweddingsalgarve.com/wp-content/uploads/2018/03/logo2.png');
	  }

	});
})(jQuery);

Cheers!

#8

Thank you for your help, it´s perfect.

#9

You’re more than welcome, glad we could help.

Cheers!

#10

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