We Keep Coding

fixing a mobile menu and logo as header for smaller screens

I have a side navigation menu for bigger screens in this file. I want to create a navigation bar for mobile phones and smaller screens below 1024px width. I have tried making the mobile navbar hidden for bigger screens and it just acts up. I need some here is a link to my page
I will want it to look like this
I got the inspiration of the page from link and they were able to make it responsive.
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
/*----------------------------------------------------
#Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container,
.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}
<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

To hide the navigation panel & make the site responsive in mobile view use media query in css
#media only screen and (max-width: 736px) { /* css property for phone */ }
To animate and view side navigation
https://www.w3schools.com/howto/howto_js_sidenav.asp

CSS transition on load via JQUERY

I'm trying to write some code to cause a transition on load, so I basically have some jquery adding a class, transition-left to a div and some css that says to move left if it has the class transition-left. However, even though the class is being added, the transition isn't happening. I just don't know why that is the case. Here is my code.
$(document).ready(function () {
$("#curtain-left").addClass("transition-left");
});
$(document).ready(function () {
$("#curtain-right").addClass("transition-right");
});
.curtain {
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
/* CSS variables to prevent duplication below */
--piece-width: 100px;
}
.curtain .content {
/* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 0;
}
.curtain-panel {
display: flex;
align-items: center;
position: absolute;
width: 50%;
height: 100%;
transition: left, right;
transition-duration: 3s;
}
.curtain-panel.left {
left: 0;
justify-content: end;
}
.curtain-panel.right {
right: 0;
}
.curtain-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #333;
}
.curtain-piece-left {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(100% - var(--piece-width) / 2);
}
.curtain-piece-right {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(var(--piece-width) / -2);
}
.transition-left{
left: -100%;
}
.transition-right{
right: -100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/curtain.css" />
<link rel="stylesheet" href="css/index.css" />
<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/index.css" rel="stylesheet">
<link href="./css/starter-template.css" rel="stylesheet">
<!-- Let browser know website is optimized for mobile
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->
</head>
<body>
<div class="curtain">
<div class="curtain-panel left">
<img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/>
</div>
<div class="curtain-panel right">
<img src="https://lh3.googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right" id="curtain-right"/>
</div>
<div class="content">
<nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top">
<a class="navbar-brand" href="#">a</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">b</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">c</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">d</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">e</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Template</h1>
<p class="lead">
Use this document as a template for other pages.<br />
Keep in mind, Bootstrap documentation might be needed to build
components of the other pages.
</p>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/curtain.js"></script>
<script src="jquery-3.4.1.min.js"></script>
</body>
</html>

You are adding it in the wrong place. Check out my version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<style>
body{
margin: 0;
padding: 0;
font-size: 14px;
overflow-x: hidden;
}
.curtain {
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
/* CSS variables to prevent duplication below */
--piece-width: 100px;
}
.curtain .content {
/* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 0;
}
.curtain-panel {
display: flex;
align-items: center;
position: absolute;
width: 50%;
height: 100%;
transition: left, right;
transition-duration: 3s;
}
.curtain-panel.left {
left: 0;
justify-content: end;
}
.curtain-panel.right {
right: 0;
}
.curtain-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #333;
}
.curtain-piece-left {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(100% - var(--piece-width) / 2);
}
.curtain-piece-right {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(var(--piece-width) / -2);
}
.transition-left{
left: -100% !important;
}
.transition-right{
right: -100% !important;
}
</style>
<div class="curtain">
<div class="curtain-panel left">
<img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/>
</div>
<div class="curtain-panel right">
<img src="https://lh3.googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right" id="curtain-right"/>
</div>
<div class="content">
<nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top">
<a class="navbar-brand" href="#">a</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">b</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">c</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">d</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">e</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Template</h1>
<p class="lead">
Use this document as a template for other pages.<br />
Keep in mind, Bootstrap documentation might be needed to build
components of the other pages.
</p>
</div>
</main>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
$(".curtain-panel.left").addClass("transition-left");
$(".curtain-panel.right").addClass("transition-right");
})
</script>
</body>
</html>

Faded header on scroll down - apply to scroll up as well

I have a header that fades from transparent to blue once you start scrolling. Once you reach the top of the page again the header returns to transparent.
But right now it just jumps back to being transparent. Might be obvious - but what can I do to make the blue fade nicely to transparent as well?
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
transition: all .5s linear;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

Looks like the problem here is that the CSS transition property is included in the class that you're adding/removing as you reach the top of the page ("navbar-inverse"). The transition will work when you add the class, but removing it will give the abrupt change in transparency you're seeing.
Instead, try putting the transition in a separate ".navbar" class, and removing it from "navbar-inverse", like so:
.navbar{
transition: all .5s linear;
}
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");
} else {
$('.navbar').removeClass("navbar-inverse");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar{
transition: all .5s linear;
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

You can the jQueryUI animated addClass() removeClass();
function checkScroll() {
var startY = $('.navbar').height() * 1; //The point where the navbar changes in px
if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse", 1000, "easeInBack");
} else {
$('.navbar').removeClass("navbar-inverse", 1000, "easeInBack");
}
}
if ($('.navbar').length > 0) {
$(window).on("scroll load resize", function () {
checkScroll();
});
}
body {
height:1000px;
}
.btn-gs {
background: blue;
border: 2px solid blue;
padding: 5px 23px !important;
border-radius: 25px;
font-weight: 500;
letter-spacing: 1px;
margin-top: 25px;
color: #fff !important;
text-transform: uppercase;
}
.navbar-alt {
height: 80px;
}
.navbar-brand-alt {
padding: 0;
}
.navbar-signup {
margin-top: 3px;
margin-left: 10px;
}
.navbar-right-alt {
position: static !important;
padding-top: 20px !important;
a {
color: #fff !important;
font-size: 16px !important;
&:hover {
color: darken(#brand-primary,10%) !important;
background-color: transparent !important;
}
}
}
.navbar.navbar-inverse {
background: transparent;
border: none !important;
}
.navbar.navbar-inverse.scrolled {
background: #32404E;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-alt navbar-fixed-top scrolled">
<div class="row">
<div class="col-md-offset-1 col-md-3">
<div class="navbar-header">
<a href="#Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
</div>
<div class="col-md-offset-2 col-md-5">
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-phone"></i>
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
Back
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

How to replace css class value using angularjs values?

I have a problem now to make my css values dynamic. I have this kind of code but not working
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
I've seen this post from this link
How to Dynamically create a CSS class using AngularJS
i don't know what is my mistakes there that it didn't work.
Anyone have an alternative solution to my problem.
I just want to make bootstrap panel to be customized in colors and i don't want to put ng-class or ng-style in every panel i used coz it is so many.
Anyone have an idea please let me know.
Full Code
<!DOCTYPE html>
<html data-ng-app="Aptus">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
<title>Centralized Test</title>
<!--<link href="http://cdn.dbtc.sdb.ph/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />-->
<link href="contents/css/angucomplete.css" rel="stylesheet" />
<link href="contents/css/bootstrap.min.css" rel="stylesheet" />
<link href="contents/css/dashboard.css" rel="stylesheet" />
<link href="contents/css/loading-bar.css" rel="stylesheet" />
<link href="contents/css/loading-bar.min.css" rel="stylesheet" />
<link href="contents/css/font-awesome.min.css" rel="stylesheet" />
<link href="contents/css/cropper.min.css" rel="stylesheet" />
<link href="styles/myStyles.css" rel="stylesheet" />
<link href="contents/css/elusive-webfont.css" rel="stylesheet" />
<link href="contents/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="contents/css/angular-chart.css" rel="stylesheet" />
<link href="Scripts/ckeditor/contents.css" rel="stylesheet" />
<link href="Contents/css/colorpicker.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.ng-ckeditor {
border: 0;
}
body {
overflow-x: hidden;
}
#sidebar-dropdown {
color: #9a96a1 !important;
}
.form-control {
border-radius: 0 !important;
}
.modal .modal-body {
max-height: 450px !important;
overflow-y: auto;
}
#media (max-width:767px) {
.small-width-hidden {
display: none;
}
}
#media screen {
footer {
display: none;
}
}
#media print {
.progress {
background-color: #F5F5F5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
}
.progress-bar-success {
display: block !important;
background-color: #198718 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#198718', endColorstr='#198718')" !important;
}
.progress-bar-info {
display: block !important;
background-color: #5BC0DE !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
}
.progress, .progress > .progress-bar {
display: block !important;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 !important;
-webkit-box-shadow: inset 0 0 !important;
}
.not-printable {
display: none;
}
.additional {
display: inline-block !important;
}
.printable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
}
.small-font {
font-size: 8pt !important;
}
.small-padding > tbody > tr > td {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > tbody > tr > th {
padding-top: 1px !important;
padding-bottom: 1px !important;
margin: 1px !important;
}
.small-padding > table {
padding: 1px !important;
}
.small-font > span {
font-size: 6pt !important;
}
footer {
position: fixed !important;
bottom: 0 !important;
}
#page {
size: auto;
margin: 5mm;
}
}
#CriteriaTable > tr > th {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.dashboardsubmenu {
list-style-type: none;
padding-left: 10px;
}
.tab-content {
border-right: solid 1px #ddd;
border-left: solid 1px #ddd;
border-bottom: solid 1px #ddd;
}
#icon-tab > li > a {
border-radius: 0 !important;
}
#loading-bar-spinner .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: red;
border-left-color: red;
border-radius: 10px;
-webkit-animation: loading-bar-spinner 400ms linear infinite;
-moz-animation: loading-bar-spinner 400ms linear infinite;
-ms-animation: loading-bar-spinner 400ms linear infinite;
-o-animation: loading-bar-spinner 400ms linear infinite;
animation: loading-bar-spinner 400ms linear infinite;
}
#loading-bar .bar {
background: red;
}
#loading-bar .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 1px red, 0 0 1px red;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/************For Angular-Modal****************/
#media (max-width:530px) {
.message {
width: 100% !important;
}
}
/*******************************************/
a:not(:hover) {
text-decoration: none !important;
}
.modal-content {
border-radius: 0;
}
.go-top {
position: fixed;
bottom: 1em;
left: 1em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.math-tex {
font-size: 20px !important;
}
table.floatThead-table {
border-top: none;
border-bottom: none;
background-color: #fff;
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="Scripts/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!---->
<!-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
</head>
<body data-ng-cloak="" data-ng-controller="indexController">
<style>
.panel-primary {
background-color:{{myColorPanel}}
}
</style>
<div class="container">
<div class="row">
<div class="wrapper">
<div class="sidebar-wrapper not-printable">
<div class="sidebar not-printable" style="margin-bottom:10px">
Centralized Test
<div class="user-panel">
<div class="pull-left image">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello {{lastName}}</p>
<a class="cursor-pointer" data-ng-click="logOut()">Log Out</a>
</div>
</div>
<ul class="nav nav-pills nav-stacked">
<li><a class="cursor-pointer">Dashboard</a></li>
<li id="sidebar-dropdown" data-ng-repeat="mod in modulesData | filter:{userRoleName:currentRole || ''}" data-ng-class="{'active' : activeModule == mod.moduleId}">
<a href="{{mod.moduleUrl}}" data-toggle="collapse" data-target="#{{mod.moduleId}}" data-ng-click="setCurrentModule(mod);SetActiveModule(mod.moduleId)">
<span class="pull-right"><span class="caret" data-ng-show="mod.moduleUrl == '#' || mod.moduleUrl == ''"></span></span><i class="{{mod.iconUrl}}"></i> <span>{{mod.moduleName}}</span>
</a>
<ul class="collapse dashboardsubmenu" id="{{mod.moduleId}}" style="list-style-type: none">
<li class="list-group-item no-border" data-ng-repeat="sub in mod.subModule | filter:{userRoleName:currentRole || ''}"><i class="{{sub.iconUrl}}"></i> <span>{{sub.moduleName}}</span></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content-wrapper">
<div class="content">
<div class="container not-printable">
<div class="row">
<div class="header">
<nav class="navbar navbar-static-top navigation" role="navigation">
<a class="navbar-toggle navbar-left cursor-pointer" role="button" id="toggle-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-left">
<ul class="nav navbar-nav">
<li><a class="cursor-pointer" href="#/home" data-ng-click="setCurrentModule('Dashboard')" style="color:white !important"><span class="fa fa-home fa-lg"></span></a></li>
<li class="dropdown" data-ng-show="iTestRoles.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#Roles">{{currentRole}} <span class="caret"></span></a>
<ul class="dropdown-menu" id="Roles">
<li data-ng-repeat="data in iTestRoles"><a class="cursor-pointer" data-ng-click="SetiTestRole(data.userRoleName,data.userRoleId)">{{data.userRoleName}}</a></li>
</ul>
</li>
<li class="dropdown" data-ng-show="iTestSubjectGrade.length>0">
<a class="cursor-pointer dropdown-toggle" data-toggle="dropdown-menu" data-target="#SubGrade">{{subject}} {{grade}}<span class="caret"></span></a>
<ul class="dropdown-menu" id="SubGrade">
<li data-ng-repeat="data in iTestSubjectGrade"><a class="cursor-pointer" data-ng-click="SetiTestSubGrade(data.subject,data.grade,data.subjectCode,data.gradeID)">{{data.subject}} {{data.grade}}</a></li>
</ul>
</li>
</ul>
</div>
<div class="navbar-right right-nav">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle cursor-pointer" data-toggle="dropdown-menu" data-target="ProfileMenu">
<i class="fa fa-user"></i> {{firstName
}} {{middleInitial}} {{lastName}} <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="ProfileMenu">
<!-- User image -->
<li class="user-header bg-light-green">
<img src="Contents/images/photo.png" class="circular" alt="User Image" />
<p>
{{firstName}} {{middleInitial}} {{lastName}}
<!--- {{userRole}}-->
<small></small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<!-- <div class="col-xs-4 text-center">
Followers
</div>
<div class="col-xs-4 text-center">
Sales
</div>
<div class="col-xs-4 text-center">
Friends
</div>-->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a class="btn btn-default btn-flat cursor-pointer">Profile</a>
</div>
<div class="pull-right">
<a class="btn btn-default btn-flat cursor-pointer" data-ng-click="logOut()">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row not-printable" id="content-title">
<h3>{{currentModule.moduleDescription}}</h3>
</div>
<div class="row" id="content">
<div data-ng-view="" class="printable">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="go-top text-center not-printable">
<span class="fa fa-chevron-circle-up not-printable" style="font-size:32px"></span><br />
<span class="not-printable">Go to Top</span>
</a>
</div>
<div id="icon" class="modal fade" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border-radius:0">
<div class="modal-header" style="border-radius:0;background-color:#3c8dbc">
<label class="modal-title" style="color:white">Icons</label>
</div>
<div class="modal-body">
<ul class="nav nav-tabs cursor-pointer" role="tablist" id="icon-tab">
<li class="active"><a class="cursor-pointer" role="tab" data-toggle="tab" data-target="#glyphicons">Glyphicons</a></li>
<li><a role="tab" data-toggle="tab" data-target="#font-awesome">Font-Awesome</a></li>
<li><a role="tab" data-toggle="tab" data-target="#elusive">Elusive-Icon</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="glyphicons">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="glyph in ModuleIcons.GlyphIcons" style="padding:10px"><span class="{{glyph.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="font-awesome">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="awesome in ModuleIcons.FontAwesome" style="padding:10px"><span class="{{awesome.Name}}"></span></div>
</div>
</div>
</div>
<div class="tab-pane" id="elusive">
<div class="row">
<div class="col-md-12">
<div class="col-xs-1 col-md-1 cursor-pointer" data-ng-repeat="elusive in ModuleIcons.ElusiveIcon" style="padding:10px"><span class="{{elusive.Name}}"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="border-radius:0">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-ng-click="Submit(classes,enrollCodes)">Continue</button>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="warning-dialog.html">
<div class="modal-header" style="border-radius:0">
<h4 style="font-weight:bolder" class="text-center">You're Idle. Do Something!</h4>
</div>
<div ng-idle-countdown="countdown" ng-init="countdown=10" class="modal-body" style="border-radius:0">
<progressbar max="10" value="10" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
</div>
</script>
<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
<h3>You've Timed Out!</h3>
</div>
<div class="modal-body">
<p>
You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
</p>
</div>
</script>
<script src="scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-local-storage.min.js"></script>
<script src="scripts/loading-bar.min.js"></script>
<script src="scripts/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="scripts/angular-idle.min.js"></script>
<script src="scripts/angucomplete-alt.min.js"></script>
<script src="scripts/moment.min.js"></script>
<script src="scripts/bootstrap-datetimepicker.min.js"></script>
<script src="scripts/cropper.min.js"></script>
<script src="scripts/dashboard.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/Chart.min.js"></script>
<script src="scripts/angular-chart.js"></script>
<script src="Scripts/ng-ckeditor.js"></script>
<script src="Scripts/angularjs-unique.js"></script>
<script src="Scripts/bootstrap-colorpicker-module.min.js"></script>
<script src="app/app.js"></script>
<script src="app/Controllers/IndexController.js"></script>
<script src="app/Controllers/loginController.js"></script>
<script src="app/Services/authInterceptorService.js"></script>
<script src="app/Services/authService.js"></script>
<script src="app/Controllers/HomeController.js"></script>
<script src="app/Services/HomeService.js"></script>
<script src="app/Filters/Filter.js"></script>
<script src="app/Controllers/SetupController.js"></script>
<script src="app/Services/SetupService.js"></script>
<script src="app/Directives/Directives.js"></script>
<script src="app/Controllers/TestController.js"></script>
<script src="app/Services/TestService.js"></script>
<script src="app/Controllers/ITestController.js"></script>
<script src="app/Services/ITestService.js"></script>
<script src="app/Services/SignalRService.js"></script>
<script src="Scripts/jquery.floatThead.min.js"></script>
<script src="app/Controllers/ActivateExamController.js"></script>
<script src="app/Services/ExamActivationService.js"></script>
<script type="text/javascript">
$('#icon-tab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
//$.fn.modal.Constructor.prototype.enforceFocus = function () {
// modal_this = this
// $(document).on('focusin.modal', function (e) {
// if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_select')
// && !$(e.target.parentNode).hasClass('cke_dialog_ui_input_text')) {
// modal_this.$element.focus()
// }
// })
//};
$(document).ready(function () {
// Show or hide the sticky footer button
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 300);
})
});
</script>
</body>
</html>

I've provided a simple example below as to how you can switch classes, not directly modify the classes, however that's not a very typical procedure.
function MyCtrl($scope) {
$scope.myClass = 'blue'
}
.blue { color: blue }
.red { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<h2 ng-class="myClass" ng-click="myClass = myClass == 'blue' ? 'red' : 'blue'">Click Me!</h2>
</div>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
angular.module("myApp",[]).controller("myController",function($scope){
$scope.name="sagar";
$scope.myColorPanel ="green";
$scope.colorChange=function(color){
$scope.myColorPanel =color;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<style>
.panel-primary {
background-color:{{myColorPanel}};
}
</style>
<div class="panel-primary"><h3>{{name}} ,dynamic Color Change By Angularjs</h3></div>
<button ng-click="colorChange('red')">Red</button>
<button ng-click="colorChange('blue')">Blue</button>
<button ng-click="colorChange('pink')">Pink</button>
<button ng-click="colorChange('yellow')">Yellow</button>
</body>
</html>
Hope That Was Help you..

Now I found the real problem. Its the version of the angularjs that i use didn't support angularjs in style. Since it is an existing system, the angularjs used is older version. The version I previously used is 1.2x then i updated it to newer version (1.5x) and all the code I used is now working. Thank a lot for all the effort of you guys. I know its my fault not realized about the version of angularjs but thank you so much.
The solution was changing from old version to newer version.

ng-class is the best option if you want it to work using AngularJs.
You can check this article.Hopefully this will give you the solution to your problem.

I think it should work.
May be there are other places where background color on .panel-primary is being set.
You are using bootstrap, right? Make sure your custom CSS is loaded after bootstrap's CSS.

Put the style tag inside your controller, not in the head tag as follows
<body ng-controller="MainCtrl">
Background of div is <input ng-model="name">
<style>
.p { background-color: {{name}}; }
</style>
<div class="p">dddd</div>
</body>

Jquery mobile script conflicting on bootstrap 3

Is there a way for me to use jquery mobile script without conflicting it on my bootstrap 3? My issue are my links is not working when I used Jquery mobile script but whenever I remove the script my links are working fine. I use Jquery mobile for my pop up feature. I'm a newbie on jquery and bootstrap web development, I apologize if my question seems too newbie.. Any help in my case is highly appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<style>
body {
padding: 20px 50px 150px;
font-size: 20px;
text-align: center;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}
#picbg
{
background: url('board.jpeg') no-repeat center center;
}
#container
{
margin: 0 auto;
width: 850px;
background: #fff;
}
</style>
<style>
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; }
*+html .centered-pills ul.nav-pills { display:inline; }
</style>
<body>
<div class="container">
<div class="jumbotron" id="picbg">
<h1><font face = "brush script mt" color="#fff">My Page</font><h1></div>
</div>
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills" role="tablist">
<li class="active"><span class="glyphicon glyphicon-home"></span><h2><b>Home</b></h2></li>
<li><span class="glyphicon glyphicon-envelope"></span><h2><b>Contact Me</b></h2></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-user"></span><h2><b>Profile</b></h2> </a>
<ul class="dropdown-menu" role="menu">
<li><h2><b>Web</b></h2></li>
<li><h2><b>Author</b></h2></li>
<li>About</b></h2></a></li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="a" data-theme="d" data-corners="false">
<img class="popphoto" src="image1.png" style="width:600px;height:756px;" alt="">
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>