How to keep background position in the same location once an off-canvas menu opened?

Admin 1
Viewed 213

I have a background image as can be seen here https://www.nova969.com.au/win/novas-sending-you-ed-sheeran

The image is background image to the body. When the off-canvas menu is opened, the background image shifts. I will like to keep the background image to stay in the exact location where it was before opening the background image.

You will notice the following css is there for the body

body.has-background {
    background-image: url(https://d2nzqyyfd6k6c7.cloudfront.net/nova-skins/972409-novafm-edsheeran-platwinpage-bg.jpg);
}

When the off-canvas opens, it causes background position shift. I need to ensure that the background does not shift. Can someone help me in getting this resolved?

Combining the two images into one is not an option for our case at this moment.

Also, to replicate,

  • Go to the link using any browser in Desktop
  • scroll a bit down the page.
  • Open the off-canvas menu (the one on the left-hand top side)
  • You will notice the shift of the background
css html javascript
3 Answers

If i've understood your problem correctly then the following should fix it.

Edit: it seems to only be an issue on devices over 1200px wide? If so, then apply these changes using @media (min-width: 1200px).

Make the following declaration additions to the following selectors: 

.disabledInteraction {
  position: relative;
}

(or delete the position: fixed; from .disabledInteraction)

and then:

.header-fixed .site-wrapper {
    margin-top: 0 !important;
}

The problem lies with fixing the position of body. If you remove this declaration or change it to position: relative, you can see this stops the image moving around problem.

The problem then is that the text moves up the screen, which is caused by some JS changing the margin to -268px. Adding margin: 0 !important overrides this, but if you can you should stop the JS from adding this negative margin.

Hope this helps!

user_79452590

As you might of figured out, this is a standard behavior of a website. Content shifts as your available area shifts (scroll is part of visible area) causing your whole content of the page to shift 17 pixels? (Whatever the scroll is).

What you need to do is append a scroll once the sidebar is open. I had a play with your website and it works, however there must be some javascript which removes the scroll bar.

I was going to fine the file for you, but you're returning too many files and I don't have time to go through all of them.

Selector:

body > div.site-wrapper.off-canvas-menu-overlay

Add overflow-y: scroll to that div using javascript, on sidebar open event, or when you add it in CSS make sure whatever is manipulating that Element once the sidebar is open that it stops as currently it seems to append styles on open event.

enter image description here

user_43774300

I guess you mean the "hidden" menu on the left side of the page.

The background shifts because the scrollbar is removed when you open the menu.

You could change your code so the scrollbar stays visible, or shift the background image to accomodate for this change. I'm not sure if you can do that so it will work without a flicker in every browser, so your best bet is to keep that scrollbar visible.

user_15779260
Related