Develop Reference

Menu bar appearing behind iframe

I have a site with a menu bar. This is its CSS:
navigation {
position: relative;
z-index: 200;
}
In one of the pages, I have a button which triggers an iframe and that button is wrapped with div. The iframe is external and my div is coming over that iframe. I want it to be go behind, but can't seem to find a way.
I also want to make sure that any change will not impact other browsers and screen layouts (like mobile).

Change the z-index of the button to be less than that of the iFrame
Mess around with z-index on here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

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

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

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!

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.

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.

Facing issues with smooth scroll to a div

I am facing issues where when a user clicks on a link it redirects them to a specific div with a specific id.
I'm using jQuery for the smooth scroll feature.
The issue is when I'm at the Homepage then I click on the About page it normally scrolls there, when I click back on the About link again the page moves a bit click again and it returns to normal.
You can try it out here (https://saa-d.github.io) And all of the code is here (https://github.com/saa-d/saa-d.github.io)
Thanks in advance :)
EDIT: I've tried troubleshooting using Chrome's inspection tool, and I think the problem is with the .stick CSS class that's responsible for sticking the navbar using JS. But I am not exactly sure what's the issue and how to fix it.

It's happening because you attach and detach the nav which causes the section to shift up and down by the height of the nav.
To avoid it use position:absolute on the nav:
nav {
background-color: #595241;
height: 60px;
position: absolute;
width: 100%;
}

How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls?

What I'm saying is, I have some extremely long pages on my website, which can make it annoying if my visitors need to scroll to the top of the page to be able to navigate to another page.
I'm not quite sure what I would call this but any Google search that contains the words 'DIV' and 'float' come up with completely unrelated results...
What I'm looking to do is create a DIV that stays at the top of the Screen (not to be confused with the page) so that if the user is at the bottom of the page, they can still see the navigation bar just floating at the top of the screen. What I can think of is to position the DIV relative to the position of the screen but I don't know how to code this.
I'm happy to use JavaScript (preferably in the form of jQuery), but if you know how to do this using CSS, I would favour your response.
This might help: I know a little bit of jQuery and JavaScript and I know a good deal of CSS and HTML.
Thanks in advance.

fixed position has exactly this purpose and this is pure CSS:
div {
position: fixed;
top: 0;
}

Try this:
<div style="position: fixed;"></div>

You should be able to use CSS Fixed Positioning
#eleID {
position: fixed;
top: 0;
}

Have the header/toolbar remain static at the top of the page during scrolls

On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.

Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.

Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers

You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.