Support/Ultra Theme/Overlap header

[Resolved] Overlap header

Tagged: 

  • Author
    Posts
  • March 30, 2020 at 12:41 pm #14178

    Aleksandar
    Participant

    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.

    March 30, 2020 at 9:55 pm #14189

    Andrew Misplon
    Keymaster

    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.

    March 31, 2020 at 6:40 pm #14193

    Aleksandar
    Participant

    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?

    April 1, 2020 at 10:05 am #14195

    Andrew Misplon
    Keymaster

    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;
}
    April 1, 2020 at 2:52 pm #14198

    Aleksandar
    Participant

    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.

    April 1, 2020 at 5:18 pm #14199

    Andrew Misplon
    Keymaster

    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.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Scroll to top