Develop Reference

Trying to use EventListener to change navbar on scroll, not working

Currently trying to change the navbar on scroll to reduce its size and change the colors in it (specifically, change from transparent background to white, and change font colors). This is the HTML code:
/* Setting the overall html file font */
html{
font-family: "nunito", sans-serif;
font-size: 10px;
}
/* Ensure no link coloring for any anchors */
a, a:hover, a:focus, a:active {
text-decoration: none;
color: inherit;
}
/* Setting some desc for the container of the navbar */
.wrapper{
position: fixed; /* Keep it fixed */
top: 0; /* 0 from the top */
left: 0; /* 0 from the left */
width: 100%; /* Make sure it fits the whole page */
padding: 0 1.5rem; /* Since they're only two values, top and bottom are 0, left and right at 1.5rem */
margin: 0 auto; /* Setting the margins */
/* transition allows us to add transitions to elements in our html file */
/* It takes first the argument of what to transition, then how fast, then the transition type */
/* In our case, we change the background color, and would like to with ease */
transition: background-color .5s ease;
/* We set the z-index, which defines the stack, to ensure it's always above anything */
z-index: 9999;
}
/* Setting desc for the nav bar */
.wrapper .navbar{
width: 100%; /* Again ensure that the width is 100% */
height: 10rem; /* Set height of the navbar to be 10rem */
display: flex; /* flex */
align-items: center; /* This defines alignment across cross axis, align all center (FLEX PROPERTY) */
justify-content: space-between; /* This defines alignment across main axis, space between means fill out (FLEX PROPERTY) */
border-bottom: 2px solid rgba(255,255,255,.05); /* Setting the border at the bottom */
padding: 0 30px;
}
/* Setting desc for the navbar logo */
.wrapper .navbar-brand{
color:black; /* For now, setting color to be black of the logo */
font-size: 3.5rem; /* Setting the font size for the logo */
font-weight:bold; /* Bold */
float: left;
}
/* Setting desc for the header list */
.wrapper .navbar .menu ul li{
display: inline-block; /* Making it inline-block, so that the list is just horizontal */
margin-top: 15px; /* Addting margin around, to make prettier */
text-transform: uppercase; /* Make all text uppercase */
letter-spacing: 3px;
}
.header-list{
display: inline-block;
float: none;
vertical-align: top;
margin: 0 auto;
}
.navbar-collapse{
text-align: center;
}
/* Setting desc for the header links of the navbar */
.header-link{
text-decoration: none;
color:black;
font-size: 1.6rem;
position: relative;
margin: 0 2rem;
}
/****************** Navbar Effects ******************/
/* ::after is used meaning after each of the objects header-link, do the following */
/* Here, we want to set it so that we add a line when we hover, right now we set what the actual */
/* after should be */
.header-link::after{
content: ''; /* Used with ::after, shows what content would be shown after. Here, line */
width: 100%;
height: 2px;
background-color:black;
position: absolute;
left: 0;
bottom: -3px;
/* ACTUAL TRANSFORMATION HERE, DIRECTION AND WHERE AND TYPE */
/* We first define what the transformation would be, then the origin, then we define it in a */
/* transition so that we could edit various thing */
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}
/* Effects for hovering on a link */
.header-link:hover::after{
transform: scaleX(1); /* Actually show the line under, scaleX(1) rather than 0 */
}
/* Some searchbar desc and effects (GENERAL) */
.searchbar{
position: relative;
}
/* Styling the text inside the search bar */
.searchbar input[type="text"]{
border: 0;
padding: 0;
width: 0px;
height: 35px;
border-radius: 3px;
}
/* Styling the icon for the search bar */
.searchbar .icon{
position: absolute;
top: 0;
right: 0;
width: 35px; /* Setting the width */
height: 100%; /* 100% height */
background: none;
border-radius: 3px;
color:black;
transition: all 0.5s 0.3s ease;
}
/* Span, or the actual glyphicon */
.searchbar .icon span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* Making sure the icon is in the box */
cursor: pointer; /* Sets what the cursor would look like aka pointing to click */
}
/* Effects for when clicking on the icon */
.searchbar .icon.active{
background:beige;
transition: all 0.3s ease; /* All means all properties of icon will have this effect */
}
/* Effects for when searching */
.searchbar input[type="text"].active{
width: 250px;
padding: 0 10px;
transition: all 0.5s 0.2s ease; /* Again, all properties. All setting effect duration to complete and so */
}
/* CENTERING AND MAKING SURE SAME LINE, FIXING NAVBAR */
#media (min-width: 768px){
#navbarNav.navbar-collapse.collapse {
display: flex!important;
align-items: center;
margin-top: 15px;
flex-basis: auto !important;
padding-left: 0;
}
.navbar-toggler {display: none;}
.navbar-brand {padding: 0 !important;}
}
ul li {margin-top: 0;}
/* Fixing the navbar when we resize, collapsing */
/* FROM https://codepen.io/RajRajeshDn/pen/dLgQbg */
#media screen and (max-width: 1318px){
.wrapper .navbar{
padding: 0px;
flex-direction: column;
height: 120px;
justify-content: center;
}
.wrapper .navbar .menu{
display: none;
}
.wrapper .navbar .menu ul li{
display: block;
text-align: center;
margin: 10px 0;
}
.searchbar .icon{
margin-right: -20px;
}
}
/****************** Scrolling Effects ******************/
/* Effects for when scrolling is active */
.scrolling-active{
background-color: #fff; /* Change background color */
box-shadow: 0 3px 1rem rgba(0,0,0,.1); /* Add box shadow */
}
/* Specifically changing the height of the navbar */
.scrolling-active .nav{
height: 6.6rem;
}
/* Changing height of the logo when scrolling */
.scrolling-active .nav .navbar-brand img{
height: 30px;
width: 30px;
}
/* Changing the color of the line under the header links when scrolling */
.scrolling-active .header-link::after{
background-color: black;
}
ul li {margin-top: 0;}
/* Hero Demo Content*/
.hero{
width: 100%;
height: 100vh;
background: url("mountain-large.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero::after{
content: '';
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.demo-content{
width: 100%;
height: 200vh;
background-color: #fff;
}
<!DOCTYPE HTML>
<html>
<!------------------------------ HEADER CODE ------------------------------>
<head>
<!-- Title for the project -->
<title>Final Project</title>
<!-- BOOTSTRAP LINK: CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- BOOTSTRAP GLYPHICONS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- PERSONAL CSS LINK -->
<link rel="stylesheet" href="styles.css">
</head>
<!------------------------------ BODY CODE ------------------------------>
<body>
<!------------------------------------------ NAVBAR ------------------------------------------>
<header>
<div class="wrapper">
<nav class="navbar">
<!-- Logo segment -->
<a class="navbar-brand" href="index.html"><span><img src="./bunny.png" width="50" height="50"></span>US.</a>
<!-- Creating list for the other parts, so that we can give them all a specific effect -->
<div class = "menu">
<ul>
<!-- First text/link/point -->
<li class="nav-item">
Home Page
</li>
<!-- Second text/link/point -->
<li class="nav-item">
Illustrator Gallery
</li>
<!-- Third text/link/point -->
<li class="nav-item">
Art Gallery
</li>
<!-- Fourth text/link/point -->
<li class="nav-item">
Challenges
</li>
</ul>
</div>
<!-- Creating a segment for the searchbar -->
<div class="searchbar">
<!-- Creating it as an input | placeholder is what text will show -->
<input type="text" placeholder="What speaks to you?">
<!-- The actual bootcamp glyphicon -->
<div class="icon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</nav>
</div>
</header>
<!-- Hero section -->
<section class = "hero"></section>
<section class = "demo-content"></section>
</body>
<!-- Script for changing the glyphicon search icon to a bar-->
<!-- SNIPPER FROM https://codepen.io/RajRajeshDn/pen/dLgQbg -->
<script>
$(".glyphicon-search").click(function () {
$(".icon").toggleClass("active");
$("input[type='text']").toggleClass("active");
});
</script>
<!-- Script for changing the effects when scrolling -->
<script>
// The event listener will essentially first be given the event, then the function on the event
// The event is scrolling. For the function, we first define header as a selection of the header from the document
// and define the windowPosition where the effect will take place as any Y scroll > 0
// We then call classList.toggle(), meaning we'll toggle between classes to the active scrolling one
window.addEventListener('scroll', function(){
let navHeader = document.querySelect('header');
let windowPosition = window.scrollY > 0;
navHeader.classList.toggle('scrolling-active', windowPosition)
})
</script>
</html>
I'm not actually sure if the eventListener is working or not, or if there's something wrong with the code specifically. I'm aware that the code for the scrolling is entirely different from the searchbar script, mainly because for JS I'm taking snippets from different areas and trying to make sense of everything. I'm very new to this, so I'm not sure where the error is.
JSFiddle:https://jsfiddle.net/3gjb0t2q/
(Note that the navbar gets condensed when the window size is small. I'm not sure if this adds to the problem as well)
Any help is appreciated!

There was a typo error in the fiddle. You typed querySelect which should be querySelector. Also you were accessing the wrong element. You need to access .wrapper not header.
/* Setting the overall html file font */
html{
font-family: "nunito", sans-serif;
font-size: 10px;
}
/* Ensure no link coloring for any anchors */
a, a:hover, a:focus, a:active {
text-decoration: none;
color: inherit;
}
/* Setting some desc for the container of the navbar */
.wrapper{
position: fixed; /* Keep it fixed */
top: 0; /* 0 from the top */
left: 0; /* 0 from the left */
width: 100%; /* Make sure it fits the whole page */
padding: 0 1.5rem; /* Since they're only two values, top and bottom are 0, left and right at 1.5rem */
margin: 0 auto; /* Setting the margins */
/* transition allows us to add transitions to elements in our html file */
/* It takes first the argument of what to transition, then how fast, then the transition type */
/* In our case, we change the background color, and would like to with ease */
transition: background-color .5s ease;
/* We set the z-index, which defines the stack, to ensure it's always above anything */
z-index: 9999;
}
/* Setting desc for the nav bar */
.wrapper .navbar{
width: 100%; /* Again ensure that the width is 100% */
height: 10rem; /* Set height of the navbar to be 10rem */
display: flex; /* flex */
align-items: center; /* This defines alignment across cross axis, align all center (FLEX PROPERTY) */
justify-content: space-between; /* This defines alignment across main axis, space between means fill out (FLEX PROPERTY) */
border-bottom: 2px solid rgba(255,255,255,.05); /* Setting the border at the bottom */
padding: 0 30px;
}
/* Setting desc for the navbar logo */
.wrapper .navbar-brand{
color:black; /* For now, setting color to be black of the logo */
font-size: 3.5rem; /* Setting the font size for the logo */
font-weight:bold; /* Bold */
float: left;
}
/* Setting desc for the header list */
.wrapper .navbar .menu ul li{
display: inline-block; /* Making it inline-block, so that the list is just horizontal */
margin-top: 15px; /* Addting margin around, to make prettier */
text-transform: uppercase; /* Make all text uppercase */
letter-spacing: 3px;
}
.header-list{
display: inline-block;
float: none;
vertical-align: top;
margin: 0 auto;
}
.navbar-collapse{
text-align: center;
}
/* Setting desc for the header links of the navbar */
.header-link{
text-decoration: none;
color:black;
font-size: 1.6rem;
position: relative;
margin: 0 2rem;
}
/****************** Navbar Effects ******************/
/* ::after is used meaning after each of the objects header-link, do the following */
/* Here, we want to set it so that we add a line when we hover, right now we set what the actual */
/* after should be */
.header-link::after{
content: ''; /* Used with ::after, shows what content would be shown after. Here, line */
width: 100%;
height: 2px;
background-color:black;
position: absolute;
left: 0;
bottom: -3px;
/* ACTUAL TRANSFORMATION HERE, DIRECTION AND WHERE AND TYPE */
/* We first define what the transformation would be, then the origin, then we define it in a */
/* transition so that we could edit various thing */
transform: scaleX(0);
transform-origin: left;
transition: transform .5s ease;
}
/* Effects for hovering on a link */
.header-link:hover::after{
transform: scaleX(1); /* Actually show the line under, scaleX(1) rather than 0 */
}
/* Some searchbar desc and effects (GENERAL) */
.searchbar{
position: relative;
}
/* Styling the text inside the search bar */
.searchbar input[type="text"]{
border: 0;
padding: 0;
width: 0px;
height: 35px;
border-radius: 3px;
}
/* Styling the icon for the search bar */
.searchbar .icon{
position: absolute;
top: 0;
right: 0;
width: 35px; /* Setting the width */
height: 100%; /* 100% height */
background: none;
border-radius: 3px;
color:black;
transition: all 0.5s 0.3s ease;
}
/* Span, or the actual glyphicon */
.searchbar .icon span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* Making sure the icon is in the box */
cursor: pointer; /* Sets what the cursor would look like aka pointing to click */
}
/* Effects for when clicking on the icon */
.searchbar .icon.active{
background:beige;
transition: all 0.3s ease; /* All means all properties of icon will have this effect */
}
/* Effects for when searching */
.searchbar input[type="text"].active{
width: 250px;
padding: 0 10px;
transition: all 0.5s 0.2s ease; /* Again, all properties. All setting effect duration to complete and so */
}
/* CENTERING AND MAKING SURE SAME LINE, FIXING NAVBAR */
#media (min-width: 768px){
#navbarNav.navbar-collapse.collapse {
display: flex!important;
align-items: center;
margin-top: 15px;
flex-basis: auto !important;
padding-left: 0;
}
.navbar-toggler {display: none;}
.navbar-brand {padding: 0 !important;}
}
ul li {margin-top: 0;}
/* Fixing the navbar when we resize, collapsing */
/* FROM https://codepen.io/RajRajeshDn/pen/dLgQbg */
#media screen and (max-width: 1318px){
.wrapper .navbar{
padding: 0px;
flex-direction: column;
height: 120px;
justify-content: center;
}
.wrapper .navbar .menu{
display: none;
}
.wrapper .navbar .menu ul li{
display: block;
text-align: center;
margin: 10px 0;
}
.searchbar .icon{
margin-right: -20px;
}
}
/****************** Scrolling Effects ******************/
/* Effects for when scrolling is active */
.scrolling-active{
background-color: #fff; /* Change background color */
box-shadow: 0 3px 1rem rgba(0,0,0,.1); /* Add box shadow */
}
/* Specifically changing the height of the navbar */
.scrolling-active .nav{
height: 6.6rem;
}
/* Changing height of the logo when scrolling */
.scrolling-active .nav .navbar-brand img{
height: 30px;
width: 30px;
}
/* Changing the color of the line under the header links when scrolling */
.scrolling-active .header-link::after{
background-color: black;
}
ul li {margin-top: 0;}
/* Hero Demo Content*/
.hero{
width: 100%;
height: 100vh;
background: url("mountain-large.jpg") center no-repeat;
background-size: cover;
position: relative;
}
.hero::after{
content: '';
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
}
.demo-content{
width: 100%;
height: 200vh;
background-color: #fff;
}
<!DOCTYPE HTML>
<html>
<!------------------------------ HEADER CODE ------------------------------>
<head>
<!-- Title for the project -->
<title>Final Project</title>
<!-- BOOTSTRAP LINK: CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- BOOTSTRAP GLYPHICONS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- PERSONAL CSS LINK -->
<link rel="stylesheet" href="styles.css">
</head>
<!------------------------------ BODY CODE ------------------------------>
<body>
<!------------------------------------------ NAVBAR ------------------------------------------>
<header>
<div class="wrapper">
<nav class="navbar">
<!-- Logo segment -->
<a class="navbar-brand" href="index.html"><span><img src="./bunny.png" width="50" height="50"></span>US.</a>
<!-- Creating list for the other parts, so that we can give them all a specific effect -->
<div class = "menu">
<ul>
<!-- First text/link/point -->
<li class="nav-item">
Home Page
</li>
<!-- Second text/link/point -->
<li class="nav-item">
Illustrator Gallery
</li>
<!-- Third text/link/point -->
<li class="nav-item">
Art Gallery
</li>
<!-- Fourth text/link/point -->
<li class="nav-item">
Challenges
</li>
</ul>
</div>
<!-- Creating a segment for the searchbar -->
<div class="searchbar">
<!-- Creating it as an input | placeholder is what text will show -->
<input type="text" placeholder="What speaks to you?">
<!-- The actual bootcamp glyphicon -->
<div class="icon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</nav>
</div>
</header>
<!-- Hero section -->
<section class = "hero"></section>
<section class = "demo-content"></section>
</body>
<!-- Script for changing the glyphicon search icon to a bar-->
<!-- SNIPPER FROM https://codepen.io/RajRajeshDn/pen/dLgQbg -->
<script>
$(".glyphicon-search").click(function () {
$(".icon").toggleClass("active");
$("input[type='text']").toggleClass("active");
});
</script>
<!-- Script for changing the effects when scrolling -->
<script>
// The event listener will essentially first be given the event, then the function on the event
// The event is scrolling. For the function, we first define header as a selection of the header from the document
// and define the windowPosition where the effect will take place as any Y scroll > 0
// We then call classList.toggle(), meaning we'll toggle between classes to the active scrolling one
window.addEventListener('scroll', function(){
let navHeader = document.querySelector('.wrapper');
let windowPosition = window.scrollY > 0;
navHeader.classList.toggle('scrolling-active', windowPosition)
})
</script>
</html>

I just tried it and the debugger says querySelect is not a function. You may be trying to use querySelector() instead. This might work for you.
window.addEventListener('scroll', function(){
let navHeader = document.querySelector('header');
let windowPosition = window.scrollY > 0;
navHeader.classList.toggle('scrolling-active', windowPosition)
})

Best way to create fit to screen dropdown menu

Im trying to create a dropdown menu which always covers the exact screen width/height on mobile, not leaving any of the page showing at the bottom like this
http://www.clairehartley.com
What's the best way of going about this?
At the moment I have this:
<div class="module widget-handle mobile-toggle right
visible-sm visible-xs"><a id="mobile-nav" href="#">
<div class="container1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="page-id-8122"></div>
</div>
</a>
<script>
function myFunction(x){
x.classList.toggle('change');
}
</script>
</div>
<div class="module-group right">
<div class="module left">
<div class="collapse
navbar-collapse navbar-ex1-
collapse"><ul id="menu" class="menu"><li id="menu-item-
15050" class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-has-children menu-
item-15050 dropdown"><a title="Contact"
href="url">Contact
<ul role="menu" class=" dropdow
n-menu"><li id="menu-item-12515" class="menu-item
menu-item-type-post_type menu-item-object-page menu-
item-12515"><a title="DRAWING DEVELOPMENT"
href="url">DRAWING DEVELOPMENT</a></li>
<li id="menu-item-2997" class="menu-item menu-item-
type-post_type menu-item-obje
ct-page menu-item-2997"><a title="SK
ETCHES" url">SKET
CHES</a></li>
And css:
#media(max-width: 768px){.collapse {position: absolute; height: 775px; background-color:white; z-index: 99999 !important; top:75px; left: -50px; line-height: 10px;}}
This drops down to certain height but doesn't cover screen height as, on some pages, page shows below.
Css for bars animation:
.container1 {
display: inline-block;
cursor: pointer;}
.bar1, .bar2, .bar3 {
width: 25px;
height: 4px;
background-color: black;
margin: 6px 0;
transition: 0.4s;}
.change .bar1 {
-webkit-transform: rotate(-45deg)
translate(-9px, 6px);
transform: rotate(-45deg)
translate(-7px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg)
translate(-8px, -8px);
transform: rotate(45deg)
translate(-8px, -7px);}

1 - Add HTML:
<!-- The overlay -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>
2 - Add CSS:
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100%;
width: 0;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 100%; /* 100% width */
text-align: center; /* Centered text/links */
margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /* Display block instead of inline */
transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
3 - Add JavaScript:
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}

Sticky Header Flickering on Safari Desktop Only When Anchor Scrolling

I've built a website in Adobe Muse which has a sticky header that appears when scrolling past the logo. This works perfectly on Chrome and Firefox, even on iPad Safari, however, it does not work well on desktop Safari and flickers badly when clicking an anchor link which smoothly scrolls to the anchor.
Please see the example website below:
http://mattstest03.businesscatalyst.com/index.html
When clicking 'Contact Us' on Firefox/Chrome, the sticky header will look great throughout the smooth scroll. On Safari, it flickers on/off during the scrolling. Here's a GIF of the flickering effect:
Here's my code:
CSS
#sticky-bar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 53px;
background: transparent url("assets/photoshop-eclipse.jpg") repeat left top;
}
/* Circle Logo */
#u73837 {
width: 57px;
transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-webkit-transition: width 0.4s, height 0.4s;
}
/* Text Logo */
#u56099 {
width: 229px;
transition: all 0.4s !important;
-moz-transition: all 0.4s !important;
-webkit-transition: all 0.4s !important;
}
/* Sticky Contact Us */
.sticky-contact {
position: fixed !important;
top: 9px !important;
left: -160px !important;
padding-bottom: 4px !important;
margin-top: 0 !important;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.sticky-contact:before {
content: "We'd love to talk";
position: absolute;
left: calc(-100% - 30px);
top: 8px;
color: #eee;
font-family: 'Raleway', 'Open Sans';
font-size: 17px;
}
.contact-inner {
margin-top: 4px !important;
font-size: 17px !important;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/* Circle Logo Transition */
.smaller-logo {
position: fixed !important;
top: 7px !important;
width: 40px !important;
height: 40px !important;
}
/* Normal Circle Logo */
.normal-logo {
width: 57px;
height: 57px;
}
/* Smaller Text */
.smaller-text {
width: 0 !important;
}
JavaScript
var width = window.innerWidth;
if (width > 1000) {
if (jQuery(window).scrollTop() > (jQuery('#u106240').offset().top - 15)) {
// Fade in sticky bar
jQuery('#sticky-bar').css('display', 'block');
// Re-position 'Contact Us'
jQuery('#buttonu206').addClass('sticky-contact');
jQuery('#u200-4').addClass('contact-inner');
// Hide logo text
jQuery('#u56099').css('display', 'none');
// Animate circle logo (CSS)
jQuery('#u73837').removeClass('normal-logo');
jQuery('#u73837').addClass('smaller-logo');
} else {
// Fade out sticky bar
jQuery('#sticky-bar').css('display', 'none');
// Re-position 'Contact Us'
jQuery('#buttonu206').removeClass('sticky-contact');
jQuery('#u200-4').removeClass('contact-inner');
// Show logo text
jQuery('#u56099').css('display', 'initial');
// Animate circle logo (CSS)
jQuery('#u73837').removeClass('smaller-logo');
jQuery('#u73837').addClass('normal-logo');
}
}
Please note, this isn't anything to do with the scrolling section of the JavaScript code (line 4) as I have removed this for testing and the issue persists.
I have tried a couple of CSS "fixes" on the sticky-bar ID such as -webkit-transform: translate3d(0,0,0) and -webkit-translateZ(0) but I've not had any luck. Could anybody please offer insight? Thank you.

position: fixed does not work well in ios is a know issue. Seem like it is not fixed till now. Setting translate3d(0,0,0) for element is a walk around but it is not perfect. It is still weird when you scroll. So my advice is using position: absolute instead. Just move your bar out of your content container, then give it position: absolute. See the code snipet below:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.fixed-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #123;
color: #FFF;
text-align: center;
line-height: 50px;
z-index: 1;
}
.content {
background-color: #ddd;
color: #333;
width: 100%;
padding-top: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.item {
width: 100%;
text-align: center;
height: 200px;
height: 30vh;
padding-top: 10vh;
}
<div class="fixed-bar">
I am a fixed bar
</div>
<div class="content">
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
</div>

HTML CSS, Bootstrap responsive DIV height

Good day,
I am trying to make my first responsive layout with the help of the Bootstrap Framework.
As a base layout I have taken an example template and I am now trying to modify this template.
I have added the following:
<div class="row col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
Here I want to place the page header (logo and company title)
My CSS code :
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: relative;
display: block;
}
#HeadBar h1 {
margin: 0px;
padding: 10px;
}
The problem is.. The #HeadBar doesn't show up at all.
Let alone being responsive.
Adding a H1 tag does make it visible. But I want it to be visible without any additions.
I hope that anyone could see my errors.
I know this is very basic. But I need to get a hang of it
https://jsfiddle.net/ferencik/zb50wgve/

Still need some addition, like adding z-index:1001 (or any value more than 1000 because you have class navbar-static-top in your nav - it have z-index:1000 - which overlap your #HeadBar) in #HeadBar
#HeadBar {
background-color: #FFF;
width: 100%;
position: relative;
display: block;
height: 10%;
z-index: 1001;
}

Add z-index: 9999; to the css.
Fiddle

Instead of using z-index, i would recommend fixing your position issues which are the actual cause of the problem.
I would also remove the class .row from the #headBar div. .row is used for margins within a container and shouldn't be use on the parent container itself.
On .navbar, I have set the position back to initial as it was always fixing to the top of the parent instead of finding its place below the previous sibling.
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
margin: 0px;
padding: 0px;
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
position: initial;
}
.navbar-wrapper .navbar .container {
width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 80px 0;
/* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 0px;
}
.navbar-wrapper .container {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
#media (min-width: 992px) {
.featurette-heading {
margin-top: 120px;
}
}
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: relative;
display: block;
}
#HeadBar h1 {
margin: 0px;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar-wrapper">
<div class="container">
<div class="col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
JSFiddle

With bootstrap, you have to separate row DIVs with col-... ones, like this:
<div class="row" id="HeadBar">
<div class="col-xs-12 col-md-6 border1">
Something to show
</div>
</div>
Because col-... divs use float system, and row allows to clear your DOM.
By the way, using % for height with a static or relative position does not work. You have to use pixels, em or what you want.
#HeadBar {
background-color: #ffffff;
min-height: 50px; // example
width: 100%;
position: relative;
display: block;
}
or simply use fixed or absolute property to set a pourcentage value:
#HeadBar {
background-color: #ffffff;
height: 10%;
width: 100%;
position: fixed;
left: 0;
top: 0;
display: block;
}
Hope it will help !

CSS
Change
Add the property in class .navbar-wrapper .navbar
float:left;
width:100%
See the fiddle https://jsfiddle.net/zb50wgve/4/
OR
Structural changes
Add wrap up of .row for #HeadBar.
and remove the class row from #HeadBar
Code:
<div class="row">
<div class=" col-xs-12 col-md-6 border1" id="HeadBar">
This is not showing up
</div>
</div>
See fiddle : https://jsfiddle.net/zb50wgve/5/

First, question to solve this is what are you trying to achieve?
this element with text should be fixed? static?
Second, the element with class row must wrap the elements with col-something-number
Thrid, If the nav is static don't break the nav component just add a div on top, see this fiddle https://jsfiddle.net/6evtc3ry/

Simply use a div instead of applying all kind of classes just use #headbar as you are using
<div id="HeadBar" class="">
This is not showing up
</div>
This will work well

You can use this,
#HeadBar
{
display:inline-flex;
height:10%;
width:100%;
}

How to simulate a browser through modal-popup?

As the title suggests I want to simulate a browser (or a windowed program) through a modal popup window on my site. It doesn't need to be draggable or resizable, I'm just having trouble making this "frame" around the popup window so you scroll the content and the top (with the closing "X" icon and the "program"-name) doesn't get scrolled as well.
Any suggestions how I could achieve this?

If I understand correctly, you want to show a popup containing a scrollable frame with a close button and title section doesn't scroll?
You can create the popup using the html and css here (working example). You can easily change the iframe to a normal content div if you want.
html code
<div id="popup" style="display:none;">
<div class="overlay"></div>
<div class="box">
<div class="close">x</div>
<div class="frame">
<div class="title">Title</div>
<iframe src="http://doc.jsfiddle.net/"></iframe>
</div>
</div>
</div>
css code
/* full screen dark overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
/* full screen popup */
.box {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* round black close button */
.close {
/* at the top right */
position: absolute;
top: 30px;
right: 30px;
z-index: 102;
/* in front of the frame */
/* round black */
width: 20px;
height: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background-color: #000;
color:#fff;
cursor: pointer;
text-align:center;
}
/* contains the title and frame */
.frame {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
z-index: 100;
}
/* The title */
.frame .title {
background-color: #fff;
padding:10px;
}
/* The iframe for your content */
.frame iframe {
width: 100%;
height: 400px;
border: none;
}
Advanced options
If you need more advanced options such as no scrolling of the background body, non full screen popup, center etc, you can checkout popup plugins. You can check my jquery plugin GenericBox for example code or there are a bunch of other plugins available for other options.