Log in Get SwiftGrid →
Resolved

Overlap header

Ultra Theme started by Aleksandar Mar 30, 2020 5 replies
Aleksandar Mar 30, 2020 · 12:41 pm #14178

Hello. I have a three-page website, and I am using Smart Slider 3 Pro. I would like to Slider overlap header in all three of them, but it doesn’t work on the Blog/posts page. Page Slider -> Overlap header option does not working. On the other two pages, it works properly.

Also, is it possible to do overlapping in the mobile view?

Thank you in advance.

Andrew Misplon Puro Mar 30, 2020 · 9:55 pm #14189

Hi

Thanks for letting me know.

If you the overlap will be present on all pages then for the moment, you could use https://wordpress.org/plugins/wp-custom-body-class/. Go to the settings page for this plugin and add a global body class:

overlap

This will only be ok if all pages should overlap. The class setting for the posts page isn’t working, the same as the overlap setting isn’t working. If this temporary solution isn’t suitable, let me know and I’ll send an alternative.

I’ll have this resolved in the next theme update.

Aleksandar Mar 31, 2020 · 6:40 pm #14193

Thank you, Andrew! That works perfectly for me.

But I still don’t have overlap in the mobile view. Not like that partial problem connected to a particular page, there is no overlap at all. Can you help me with that?

Andrew Misplon Puro Apr 1, 2020 · 10:05 am #14195

Glad to hear you’re making progress. To reverse the mobile behaviour you can try adding the following to Appearance > Custom CSS or Customize > Additional CSS:

.overlap #main-slider {
    margin-top: -112px;
}
Aleksandar Apr 1, 2020 · 2:52 pm #14198

It works, but now the top bar menu has disappeared. I can see the top bar menu only when open the main menu.

The problem is only for the mobile view.

Andrew Misplon Puro Apr 1, 2020 · 5:18 pm #14199

Hi. Your header height is a bit less than the default so it would need to be:

.overlap #main-slider {
    margin-top: -90px;
}

However, this change is going to cause an issue with the mobile menu background. The mobile menu isn’t absolute positioned so the slider isn’t going to be positioned behind all of the mobile menu.

You can try adding the following to change how the mobile menu behaves:

.responsive-menu .main-navigation.toggled ul {
    left: 0;
    margin-bottom: 0;
    position: absolute;
    width: 100%;
}

.responsive-menu .main-navigation.toggled ul li a {
    margin-right: 5px;
    margin-left: 5px;
}

I do my best to assist with small CSS changes but don’t officially include customizations in the theme support scope. Hopefully, the above helps you.

6 posts