We Keep Coding

Can't scroll and buttons get covered by animation after use of JavaScript

I wanted to use this 3D clouds in my Bootstrap Header, but after using the code, I can't scroll anymore and also the buttons & text get covered with the animation if the mouse is on certain positions on the screen.
I have then deactivated all functions, which relate to the mouse, but it still doesn't work properly.
Here is a jsfiddle of it.
If you delete the html comment and use the following tags, then you are using the JS Animation and the complete highlight box is hidden by it.
<div id="viewport" >
<div id="world" ></div>
</div>
Is there a possibility to put it into a container or a row?

To fix the scroll problem, comment / delete this:
body {
...
overflow: hidden;
}
To fix the overlay problem, assign a z-index to your layer:
#viewport {
...
z-index: -100;
}
This should fix your problem.

JQuery UI Slide pushes elements down, other solutions don't seem to work

EDIT: Whoops I forgot to have the console open to clear the cache when working on my actual project. Previous solutions and the ones you suggested work just fine. Thanks guys
So I'm trying to have something slide out while something else inline stays stationary. However, the sliding pushes other elements below downwards.
Here is the basic HTML:
<div id="title-container">
<h1 class="inline-header">Example.</h1>
<h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>
I tried other solutions I found through searching, but they don't seem to work. For ex, giving the outside container a fixed height with overflow hidden, will prevent the slide from pushing outside elements down, but pushes the left (static) text upwards as the right side goes down. Here is a JSFiddle showing what happens in my orig code.
https://jsfiddle.net/9hj6y79k/11/
Essentially I just want the right side to slide out without moving anything else.
I would like the position to stay as relative (rather than switching it all to absolute positioning), but if switching to absolute is the best way to do it I would not be opposed. Could anybody help out? Thanks!

You will need to add overflow:hidden; in css
https://jsfiddle.net/9hj6y79k/12/
.inline-header {
display: inline-block;overflow:hidden;
}
#title-container {
position: relative;
left: 40%;
}

Change your css class to this:
.inline-header {
display: inline-block;
vertical-align: top;
}
https://jsfiddle.net/9hj6y79k/13/

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Sticky Menu - Hides on some pages but not others

The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)

Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;

Footer will not position itself at the bottom of page

I have this footer that will not stick to the bottom of the page.
I think the issue is with my HTML and body not spanning the entire site but I just cannot find the exact place to correct this. I know its a big no-no to link to my page but I simply don't know what code to post here.
I cannot set the content to static instead of absolute because then my menu items will start pushing the content divs around when they open.

To fixed position into bottom you can try this code
Html:
<div class="tofix">
<p>Fixed this div into bottom</p>
</div>
Css:
.tofix{
width:300px;
position:fixed;
bottom:0;
}

The problem occurs because of your #content. You just try to change its position as following:
#content{
position : static;
}
Or you just simply remove it because the position is set as static by default.

Remove the position:absolute from your #content.
Also It worked when I first opened the link, please don't change the live code while asking the question.