Docs

[broavise]

Is it possible to have the menu act like this: http://avada.theme-fusion.com/fashion/
(the transparent to black transition and the scale transition on scroll)

[Nabeel A]

Hi there,

Thanks for writing in! That can be done with custom development, please refer to this thread https://community.theme.co/forums/topic/transparent-nav-transition-one-page-nav/#post-558918

Hope this helps!

[broavise]

This reply has been marked as private.

[Jade]

Hi there,

Please update your custom JS code to:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $(".x-slider-container").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: rgba(12,12,13,0.9) !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		}
	});
});

Then add this code in the custom CSS:

.x-navbar {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: background-color .25s ease-in-out;
    transform: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
}

Hope this helps.

[broavise]

Thanks for the help.

The transition is better, but the menu bar still starts with a white background, instead of being transparent over the slide.

Also, once the transition is complete, it seems to still be slightly transparent. I would like it to be solid color #333333

Also, still not sure how i remove the border lines in the menu, any suggestions?

And finally, the menu does not change its size on transition. I’ve set the menu to the size i would like the menu to be once the transition is complete

[broavise]

Update:

I was able to get the transparency to work with this code

jQuery(document).ready(function($){
  $('.home.x-navbar-fixed-top-active .x-navbar-wrap').css('height', 0);
  $('.home .x-navbar').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
  
  $(window).scroll(function(){
    if ($(this).scrollTop() > 20) {
      $('.home .x-navbar-fixed-top').css({'background-color': '#333', 'box-shadow': '0 0.15em 0.35em 0 rgba(0,0,0,0.135);', 'border-width' : '0px'});
    } else {
      $('.home .x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
    }
  });
});

Still haven’t figured out the border issue (and now for some reason the white border that was below the menu is now at the top of the menu) as well as the scaling issue.

Also, is there a way to transition the menu font from white when the menu is transparent, to the color it is currently?

[broavise]

Another update:

I was able to remove the borders in the menu

just the scaling issue and the text color transitions now

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-navbar.x-navbar-fixed-top li:not(.current-menu-item) a span {
    color: #000;
}

.x-navbar.x-navbar-fixed-top.navScroll li:not(.current-menu-item) a span {
    color: #efefef;
}

Hope that helps.

[broavise]

Thanks for the help.

I was able to get everything working except 2 little things.

1. The transition effect doesn’t seem to work completely. It just jumps from one size to the other. I’d like both the text and background to transition like what happens in the example i provided.

2. When you click the menu links, it doesn’t quite take you to the section. It falls slightly short. I suspect that it still thinks the menu is the larger size. Is there a way to fix this?

Thanks

[Rue Nel]

Hello There,

I am another staff and got confused. Most of the JS and CSS codes were not present in the your customizer. Where could I find it?

1] To change the transition and apply it for all changes, please update the css and make use of this code:

.x-navbar {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: all .25s ease-in-out;
    transform: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

2] This won’t be noticeable if the navbar works properly. At the moment I cannot properly test it. It seems that there are a JS error on the page. Please see this screenshot: http://prntscr.com/cm0vm2

Please resolve the JS error first so that we can check out the transition properly. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Please let us know how it goes.

[broavise]

Hello

I’m not sure why you can’t see the JS and CSS codes. I logged in using the account info I provided you and can see them both just fine.

I added the code you provided but it doesn’t seem to do anything

I fixed the JS error.

Now, when the page loads, the menu and logo are not in the right position, they start too high, and the logo is cut off. Once you scroll down, everything goes back to normal

[Joao]

Hi There,

Your menu is working fine, turn off under construction addon for a few seconds and check in a different browser or incognito mode, you will see it is well centered from the beginning, the space you cannot see is being taken by your WP admin bar.

You also can check in Cornerstone or Customizer.

Hope it helps

Joao

[broavise]

Thanks for pointing that out

Still have the 2 issues i described earlier though

[Rue Nel]

Hello There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[broavise]

1. The transition effect doesn’t seem to work completely. It just jumps from one size to the other. I’d like both the text and logo to transition like what happens in the example i provided. (https://avada.theme-fusion.com/fashion/)

2. When you click the menu links, it doesn’t quite take you to the section. It falls slightly short. I suspect that it still thinks the menu is the larger size.

[Author]

Posts