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.

How can I animate a div off-screen without extending the page?

I'm new to jQuery/Javascript and am trying to animate a DIV off-screen.
The problem is after it animates to a left: 125% which is off-screen, the webpage just extends. This means the user could scroll to the right and see where it went.
How can I create a fixed page size or something like this?
Thanks!

Give overflow: hidden in CSS:
body {overflow-x: hidden;}
You may need to revert it back after the animation is done, so as not to obstruct the contents scrolling.

Fixed Off-Canvas Menu with Zurb Foundation

I am building a web page with Zurb Foundation. I need my web page to run on phones and laptops. What's unique about my app is I want to do something more refined than responsive design. For that reason, I'm making heavy use of the show-for-small-only and show-for-medium-up classes.
In my phone view, I'm making use of Offcanvas navigation. As the HTML is setup, it works great if you include the content of your page in the off-canvas-wrap div. However, in my scenario, I cannot do that. Instead, I want to have the content of my page outside of the off-canvas-wrap div. This creates two problems:
The menu doesn't grow to the size of the window.
If I make the right-off-canvas-menu the height of the window, it pushes my content down.
I've created a JSFiddle here that demonstrates the problem. Is there a way I can make the offcanvas menu just slide over the top of everything? I do not need to push everything to the left. Pushing is fine. My main issue is I need to have the content where it is, but still have the menu appear full-size when needed.
Thank you

Or if you want to actually use the offcanvas menu and simply have it overlap your content, you can add this CSS (Foundation 5)
.off-canvas-wrap.move-right,
.off-canvas-wrap.move-left,
.off-canvas-wrap.move-right .inner-wrap,
.off-canvas-wrap.move-left .inner-wrap {
height:100%;
}
.off-canvas-wrap {
position: absolute;
z-index:100;
}
.main-content-wrapper {
padding-top: 2.8125rem;
}
And wrap your content in
<div class="main-content-wrapper">
[your page content here]
</div>
I updated your fiddle with the changes so you can see it in action. Obviously if you want to only show the offcanvas menu conditionally, you'll want to add a media query wrapper to those rules so they only affect the page when you want them to. Otherwise you're adding padding to the top when you don't need it.

If you don't want your content to move when you click the navigation button, then you should not use off navigation canvas (that's what its supposed to do). Instead just use the Foundation 5 Button and set the CSS to be height = 100%
http://foundation.zurb.com/docs/components/dropdown.html

How do I give this popup a scrollbar?

I can't figure this out for the life of me. On this page, if the browser height is too small, you won't be able to see the full form. How do I add a scroll bar to the popup so that people with small screen sizes will still be able to see the entire form from top to bottom?
http://kinkarso.com/rayku/profile.html
Thanks!

You change position: fixed; to position: relative; (or absolute if you want it to be overlaid something else) on the .filter-popup class

Your problem is the CSS position attribute for your popup (using filter_popup class). If you used position: fixed, the containing element will not grow to accommodate it. Change it to position: absolute instead and the scroll bar will appear.

To solve this you should use overflow:scroll which is the css way of creating scroll bars.
http://www.w3schools.com/cssref/pr_pos_overflow.asp