Editing the header

Support
#1

Hello, Im trying to get the header/imagery (e.g the header is faded and as you scroll down it becomes opaque to the colour of my choosing) like the following – http://rhythm.themerella.com/

However, I cant seem to find the header settings anywhere. Please advise.

Thank you

#2

I would also like to know how to get the head " time line image" to automatically scale to fit all devices. Can you please show me how that works.

Thank you!

#3

Hi there,

Please consider that our theme does not have that functionality out of the box and it needs the customization which is outside of our support scope. I have found a tutorial that can help you get started with that customization:

https://xthemetips.com/transparent-fixed-header/129/

I did not understand the second question. Our theme header is responsive out of the box so I am not sure where you are talking about, maybe a URL of your website with a screenshot and more information can help?

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

#4

Thank you for the help. Ignore the second question, I was slightly confused myself.

I followed the isntruction as best I could. However, one the header passes the ‘heroimage’ it does not change colour to white. it stays transparent.? any tips

the website is - www.thedoggycare.co.uk (please keep private)

#5

Hi There,

http://www.thedoggycare.co.uk/ does not load on my end. Does it work for you?

Thanks

#6

My appologoies. I meant - www.thedoggyroom.com

#7

Hi There,

Please try adding the following code and if it does not work please provide your login credentials in a secure note so we can take a closer look.

Add this to X > Theme Options > JS

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

Add this to X > Theme Options > CSS

.x-navbar.x-nav-trans {
    background-color: rgba(255,255,255) !important;
}

Hope it helps

#8

Hello, I did as asked. However, nothing change.

How can i send you a secure note?

Thank you for the assistance

#9

Hi There,

Please refer to :

Hope it helps!

#10

thank you! I’ll make sure to follow the steps

As for the info it is

#11

Hi,

There is a syntax error in your js code.

I went ahead and made the necessary changes.

Kindly check in your end.

Thanks

#12

It seems to have done the trick. However, there seems to bee a thin line (looks like a boarder) that turns to 100% white as soon as the transparency begins.

Thank you

#13

Hi There,

Look for this custom CSS block on your page CSS, and remove the border-bottom and the box-shadow

.x-navbar.pasthero {
    border-bottom: 1px solid #ccc;
    background-color: #FFFFFF;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Hope it helps,
Cheers!

#14

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