Docs

[davidferp]

Hi Support Team!

In my site with X I would like to have the slider in the home page under the navbar section, right to the top of the page. I was able to do that in desktop mode by tuning Header > Navbar Top Height but in mobile mode it is still not working.

Is there a way I can accomplish the same effect in mobile mode from the customization menu or do I need additional CSS code? In case I need CSS modifications, can you please assist?

By the way, I am currently developing on a staging server (http://2cameras1bucketl.wpstagecoach.com) on WordPress 4.5.1 running the X-Child theme (1.0.0) and the X-theme (v4.4.2) as parent.

Thanks a lot for the awesome support you provide!

[davidferp]

This reply has been marked as private.

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px){
.x-slider-container.below {
    margin-top: -110px !important;
}
}

Let us know how this goes!

[davidferp]

Hello there!

Thanks a lot for the proposed solution.

I tried your solution and I see the concept.

However I was thinking of something more screen size independent. The value of -110px works well for landscape tablet size for example but falls short for portrait format on iPhone… While in desktop mode it looks good by default only by using default X options…

What would be your idea on that?

Thanks a lot again for all awesome support you guys give

[Jade]

Hi David,

You can try this code instead:

header.masthead {
    position: absolute;
    top: 0;
    left: 0;
}

This this position the header area top the top of the page pushing the content below it to the top where it goes under it.

Let us know how it goes.

[davidferp]

Hello there!

That starts to be close to what I am looking for! 🙂 If I apply the new code provided, the slider gets right to the top of the page (thumbs up!) but now the navbar is completely off (see attached before and after pics, in mobile mode)

How can we solve that?

You guys are really genius, I appreciate all your support very much!

[Rue Nel]

Hello There,

Thanks for the updates. Please update the given css and use this instead:

.home header.masthead {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

I added a selector .home so that this code will only apply on the homepage with your slider in it and will not create issues in other pages that doesn’t have a slider.

Please let us know if this works out for you.

[davidferp]

Hi!,

Thank you so much for the code and the clear explanation.

Of course, it worked like a charm.

Very much appreciated, you guys are awesome!

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts