Keep the slider at the top of the page

Looks good to me. Which browsers are you seeing this on?

Hi ElectricFeet,

I use Firefox and Chrome for my tests. But really, the slider shifts a bit up and down on both of them when you are changing the screen resolution. I did test it by resizing the screen of the browser as well as by using https://quirktools.com/screenfly/. The same result.

It used to stay always on the top with the “Enable/disable slider’s slides centering on any devices” feature. But when I use this feature the slider jumps slightly up every time you open the homepage.

Do you have any idea how I can fix one of these issues, so my slider will be always on the top without jumping slight up every time you open the website?

Thank you,

Still don’t see it in Firefox 31 for OS X. Which are you using?

Hi ElectricFeet,

I use Firefox 31 as well.

I made a pic with the issue I am observing with the slider. Please refer to the link below

https://www.startwebsiting.com/sliderpic/

The pic in the link shows the top of the slider in different resolutions. This test was done on Firefox 31.

Let me know if you see the same …

Ah, OK, see what you mean.

Try this:

/*make slider stick to navbar for all screen sizes*/
.attachment-slider-full {
vertical-align: top;
}

Not sure if it will work best with or without your CSS as well. Try both with and without.

Hi ElectricFeet,

I tried your code but it did not work.

I think I found what the cause for this issue is. I use the following code to adjust the slider height in different resolutions:

@media (min-width: 1440px){
#customizr-slider.carousel .item {
height: 600px;
min-height: 600px;
line-height: 600px;
}
}
@media (min-width: 1700px){
#customizr-slider.carousel .item {
height: 700px;
min-height: 700px;
line-height: 700px;
}
}

When I remove the code above from my CSS, the slider is attached to the top even without any additional code. However, when I put the code in my CSS the slider starts shifting up and down and at 1440px and 1700px the gap between the slider and the bottom of the navbar is maximum.

Do you have any idea how this can be resolved? I really want to keep the slider height different for different resolutions.

How about:

#customizr-slider.carousel .item {
    vertical-align:top;
}

It did not work ?? I put it inside the @media and left it alone in the CSS file, but still the result is the same.

I removed my CSS code, the one I posted in my first post, because it doesn’t change anything …

Oops. Sorry, did that in a rush and missed off img at the end. It should be:

#customizr-slider.carousel .item img {
    vertical-align:top;
}

Leave the first suggestion in too.

@electricfeet, you are a magician. It works like a charm. Thank you very much.

One more thing tho that I was not able to resolve on my own. Now the text which is above the featured pages (under the slider) is shifting a bit up and down.

I am using the following code to display that text:

add_filter('tc_fp_block_display', 'content_before_fp');
function content_before_fp($html)
{
$before_fp = '<div style="text-align:center; font-size:24px; color:#000000;font-family:trebuchet ms">something something</div>';
return $before_fp.$html; }

Do you have any of your magic for this issue? I want to stick everything under the slider at the bottom of the slider.

Thank you again!!!

Don’t see any shifting here (Firefox / OS X).

Other magic: Rather than use that filter hook, I would use an action hook in this case—the action hook that tc_fp_block_display is itself hooked on to—but with higher priority:

//Add text before featured pages -- with priority 5, so appears before FPs
add_action( '__before_main_container' , 'content_before_fp', 5 );
function content_before_fp() {
    echo '<div class="pre-fp-text">something something</div>';
    return;
}

I also eliminated the inline styles, so you can style it with .pre-fp-text { ... } in CSS instead (is that space in your font acceptable without quotes?).

Alternatively, if the text is going to change often, you can instead add a widget area there. That way, you won’t have to fiddle with php every time (with the risk of bringing the site down with a missing “;”). Instead, you can simply use a text widget.

To do that, take this snippet to add a widget after the header, but hook it to the __before_main_container with priority 5.

As I say, I cannot see any shifting on your site; looks fine to me.

@electricfeet, thanks for getting back to me.

The problem here is not only with the text under the slider but the whole container under the slider is shifting up and down. To verify this, I removed the text under the slider and the three featured pages were again shifting up and down when changing resolutions.

I isolated the issue to the following code in my CSS:

@media (min-width: 1440px){
#customizr-slider.carousel .item {
height: 600px;
min-height: 600px;
line-height: 600px;
}
body .carousel {
margin-top: 0;
padding-top: 0;
max-height: none;
}
}

I believe that the body .carousel class is the one that should be changed in order to stick the container under the slider at the bottom of the slider for all resolutions.

Please let me know your thoughts on this. I really don’t want to lose your time any more with this issue.

Ah. See what you mean.

Yes, they shift at the breakpoints. With the current Customizr design, it will never be smooth, because that’s the way the carousel is designed.

(I have to say that I’m not a great fan of the Bootstrap Carousel that Customizr uses. I’ve switched to flexslider, inside the metaslider plugin. But even then I get a tiny glitch as my navigation “dots” are loaded—see it on darioalfonsi.com .)

p.s. I should also add that users rarely see the shifting, as they rarely resize their browsers. It’s web developers that mostly see this, as we continually play around with changing the browser window size.

@electricfeet, understood. You are right, it is not something that users will spot, but it was one of those things you notice and you want to get it fixed ??

“Flexslider inside the metaslider plugin” will be something that I might consider later when I gain more experience in the web-development. Right now, I happy with what I achieved starting from 0.

Regarding darioalfonsi.com, the slider resizes so smoothly and the website looks awesome. Good job there. Are you the developer?

Thanks for your help and time getting this one to the bottom. I appreciate it.