Docs

[richermusic]

Hi

I have a logo as a separate .png file that I would like to have as our main website logo. I would then like to use a jpg image as our website logo background as well and possibly on the nav bar.

Is it possible to get a image as the background and then a logo over the top. I have read previous posts about this but it does not seem to work.

I will upload the two files on to my media so that they are ready if you know how to do it.

[Rupok]

Hi there,

Thanks for writing in! So you want to use a background image for the Navbar? It would be possible with custom CSS but your image should be wider to look good within Navbar. Let’s provide your URL and uploaded image URL, we’ll try to tailor some code for you.

Cheers!

[richermusic]

Hi Rupok.

I have had a slightly different idea now – thank you for helping with offering to do some custom code!

My new idea is to create something like this if you could help

Home

I am guessing I need to use Revolution slider to do the video and writing popup but how do I get my nav bar to be transparent over the top of the video and how do I also get rid of the logo area so the revolution slider is at the very top of my page?

[richermusic]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > Javascript

jQuery( function($) {
	var didScroll;
	var lastScrollTop = 0;
	var delta = 5;
	var navbarHeight = $('.x-navbar').outerHeight();

	$(window).scroll(function(event){
	    didScroll = true;
	});

	setInterval(function() {
	    if (didScroll) {
	        hasScrolled();
	        didScroll = false;
	    }
	}, 250);

	function hasScrolled() {
	    var st = $(this).scrollTop();
	    
	    // Make sure they scroll more than delta
	    if(Math.abs(lastScrollTop - st) <= delta)
	        return;
	    
	    // If they scrolled down and are past the navbar, add class .nav-up.
	    // This is necessary so you never see what is "behind" the navbar.
	    if (st > lastScrollTop && st > navbarHeight){
	        // Scroll Down
	        $('.x-navbar').removeClass('nav-down').addClass('nav-up');
	    } else {
	        // Scroll Up
	        if(st + $(window).height() < $(document).height()) {
	            $('.x-navbar').removeClass('nav-up').addClass('nav-down');
	        }
	    }

	    if (st == 0) {$('.x-navbar').removeClass('nav-down')};
	    
	    lastScrollTop = st;
	}
});

Add the following code to Apperance > Customizer > Custom > CSS

.x-navbar {
    transition: all 0.5s ease;
}
.x-navbar.nav-up {
    margin-top: -51px;
}

Replace the 51px with your navbar height

Hope it helps

Joao

[richermusic]

Hi

I am afraid this has done nothing at all?

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[richermusic]

This reply has been marked as private.

[Jade]

Hi there,

First, go to Appearance > Customize > Header > Navbar Position > Fixed Top then create a slider then edit the page and set the slider under Slider Settings: Below Masthead.

Then add this code in the custom CSS:

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

.x-navbar-fixed-top {
    background-color: #292A2C;
}

.x-navbar {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

Then add this code in the custom JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
		}

	});

});

Hope this helps.

[Rupok]

Hi there,

I can see it’s working fine. Do you want to keep the menu fixed while scrolling? In that case remove this :

.x-navbar.nav-up {
    margin-top: -51px;
}

Thanks!

[richermusic]

Thank you for this.

I am a bit confused as to why the Revolution Slider says that its not activated and when I try to download custom templates – i need to activate the plugin.

Could you help resolve this as I have asked before and I have been advised to make sure my theme is up to date…which it is.

I have attached pictures for examples of what i am being told.

[Joao]

Hi There,

You cannot activate Slider Revolution unless you purchase separably, with the bundled version you need to download the available templates from this website, than import to Slider Revolution:

https://revolution.themepunch.com/free-slider-exchange/

Hope that helps

Joao

[richermusic]

Hi

Going back to the Header and having the video going on under the menu. I have now achieved this thanks to you! However, I wish to get rid of the bit that says RICHER MUSIC (please see http://www.richermusic.co.uk) at the top and would just like to have it similar to this site https://www.themepunch.com/ where they have the THEME PUNCH logo to the left and the menu options to the right. How do I do this?

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

header .x-brand {
	margin-top: 12px;
	font-size: 22px;
}

Hope it helps, Cheers!

[richermusic]

This reply has been marked as private.

[Author]

Posts