Canvas Support

How to remove white bare above Ken Burns slider

5 replies · opened Jan 17, 2019

NNicoBootsJan 17, 2019

Hello,

I am using the "Canvas Template 5-5/Package-HTML/HTML/slider-revolution-kenburns.html" as template. I have 2 questions.

  1. When I add my content and change the images into the template code there suddenly appears a white bar above the image at the top of the page. This bar is not present in the template. What should I do to remove this unwanted white bar?
    (see: http://www.duepadroni.it/slider-revolution-kenburns.html)

  2. Can you explain me how to change the height of the slide image. Adding a "style:height" to any of the <div>'s, ul's or li's within the "slider section" does not do the trick.

SSemicolon WebSTAFFJan 22, 2019

Hello,

Thanks for your Patience!

  1. We have checked your Website and the white bar is due to the Custom size of your Header. The Default Header Height is 100px, so the Transparent Header and the Slider are CSS Codes in the style.css to get the Transparent Header look. And since you have a Custom Height for the Header, the Kenburns Effect on the Transparent Header has a White Bar. Please use the following code to set the Margin according to the Height of your Header:
#header.transparent-header + #slider {
	top: -100px;
	margin-bottom: -100px;
}
  1. The "style:height" currently only works for the Canvas Swiper Slider. For the Revolution Slider, you will need to use the Revolution Slider Settings to set a Custom Height for the Slider. Consider checking out their Official Documentation for this:https://www.themepunch.com/revsliderjquery-doc/slider-layout/ .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

NNicoBootsJan 23, 2019

Hello

Thanks for your reply. I ghave done what you've suggested: added this piece of CSS-code in the head of the document. But as you can see it does not resolve the problem. The white bar still remains. Should I place this code somnewhere else?

NNicoBootsJan 23, 2019

Hello,

to be sure I have also checked the style.css file and there I find already the style that you have given above:

#header.transparent-header + #slider,
#header.transparent-header + #page-title.page-title-parallax,
#header.transparent-header + #google-map,
#slider + #header.transparent-header {
	top: -100px;
	margin-bottom: -100px;
}

What else can I do to avoid the white bar?

NNicoBootsJan 23, 2019

OK, I have now solved the problem by adding the style:

#header.transparent-header + #slider {
			top: -125px;
			margin-bottom: -100px;
		}

to the head of the document. I still haven't solved the the problem of the height of the slider, but I do have another problem:

The font-color of the primary menu is changing from the first to second and the remaining other slides. From white to black. From the inspector in Firefox I can see that there are three events going on. Apparently these create the color change? What should I do to change the colors. Is it possible to create a different color for every slide?

my site: http://www.duepadroni.it/slider-revolution-kenburns.html

SSemicolon WebSTAFFJan 24, 2019

Hello,

  1. As mentioned above, the code we provided you with earlier had to be used with the Height of your Header. So if your Header's Height is 135px, you will need to use the following:
#header.transparent-header + #slider {
	top: -135px;
	margin-bottom: -135px;
}

and likewise, if you have a different Header Height.

  1. For the Revolution Slider Height, find the following code on your Page:
revapi31 = tpj("#rev_slider_679_1").show().revolution({
	sliderType:"standard",
	jsFileLocation:"include/rs-plugin/js/",
	sliderLayout:"fullwidth",

and replace it with: 

revapi31 = tpj("#rev_slider_679_1").show().revolution({
	sliderType:"standard",
	jsFileLocation:"include/rs-plugin/js/",
	sliderLayout:"fullwidth",
	gridHeight: 600,
  1. It is certainly possible, but will require lots of customized codes and not available out of the Box. You can consider starting with this code:
revapi31.bind("revolution.slide.onchange",function (e,data) {
	// your JS Codes to change the Header Class for different Primary Menu Colors
});

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard