Docs

[mrsnooch]

Hi there,

This is actually a follow up to a topic I posted in August; https://community.theme.co/forums/topic/rev-slider-full-screen-issue-with-topbar/

However the issue is the exact same, except I no longer have a Slider Revolution slide in place, just a section with a background image – http://eveningandsaturdaytrainingcoursesbelfast.co.uk/training/adobe/indesign/

If you scroll down slowly, once the top bar disappears, the page jumps down. I have disabled top bar but get the same results. Previously I had to add .masthead to Slider Revolution settings, but seeing as I’m not even using SR here I’m not sure what I should be doing?

We plan to remove all slides and replace them with this section format instead, so for now the above link is the only one we can look at.

I will add login details in the next post.

Many thanks
Mark

[mrsnooch]

This reply has been marked as private.

[Rupok]

Hi there,

It’s pretty usual when you are using Fixed top Navbar. When the navbar become fixed, then it might happen.
I can suggest you a solution for that. You can add this under Custom > CSS in the Customizer.

.x-navbar {
  left: 0;
  position: absolute;
  right: 0;
}

.x-navbar.x-navbar-fixed-top {
  position: fixed;
}

.x-main.full {
  margin-top: 124px;
}

Hope this helps.

[mrsnooch]

Thanks Rupok,

This seems to have worked, many thanks for your quick response!

Mark

[Joao]

Glad to hear it Mark,

Have a great weekend.

Joao

[mrsnooch]

Hi again Joao,

I have noticed something. The following code;

.x-main.full {
margin-top: 124px;
}

is applying to all pages, as it should, however this is causing an undesired effect in that the 124px margin is applying to individual product pages, whereby the original issue doesn’t seem to apply, and therefore I am left with a large white area at the top of each product page. See this page as an example;

http://eveningandsaturdaytrainingcoursesbelfast.co.uk/shop/adobe/adobe-acrobat-dc-introduction/

How can I stop the margin from applying to products?

Many thanks
Mark

[Thai]

Hi Mark,

Please add the following CSS:

.single-product .x-main.full {
    margin-top: 15px;
}

Hope it helps 🙂

[mrsnooch]

Perfect!

Thanks Thai,
M

[mrsnooch]

Sorry, I’m still having difficulties with this.

I now seem to have a blank space underneath the slide (of the defined height from before). Of course removing the code fixes this, but at the same time just brings me back to where I was before.

The gap appears on every page (bar product pages, as you fixed that), but presents itself as a gap under each slide, on each page.
The home page is different however; the gap is still there, except the slider is also stuck under the logo/nav bar but only on the mobile version?

EDIT: Actually I think it’s doing the same thing on mobile and desktop, except the desktop is bigger and therefore I can read the text, but it’s still cutting off the space at the top.

Any ideas?

Thanks
M

[mrsnooch]

I think I’m just going to replace the slides with images, it should save time in the future. Please ignore the above.

Thanks
M

[Joao]

Cool,

Let us know if you need further help,

Joao

[Author]

Posts