We Keep Coding

How to make banners on one line

I can't make banners on one line. The block does not appear on the same line.
I tried applying justify-content-between align-items-center but nothing happened. I used a percentage, but nothing came out. Maybe I just inserted the styles in the wrong place.
<section className='home-wrapper-1 py-5'>
<div className='container-xxl'>
<div className='row'>
<div className='col-6'>
<div className='main-banner-content p-3 position-relative'>
<img src={require('../images/banners/MSI_GT77_HX_13V.jpg')}
alt='главный баннер' className='img-field' />
<div className='main-banner-content position-absolute'>
<h4>Восхождение легенды!</h4>
<h5>MSI GT77 HX 13V</h5>
</div>
<div className='main-banner-button-price p-6 position-absolute'>
<Link href='/' type='button' className='btn btn-outline-secondary'>Купить сейчас!</Link>
<p className='m-0'>305.999₽</p>
</div>
</div>
</div>
<div className='d-flex flex-wrap
justify-content-between align-items-center'>
<div className='small-banner-content p-3 position-relative'>
<img src={require('../images/banners/MSI_GT77_HX_13V.jpg')}
alt='главный баннер' className='img-field rounded-2' />
<div className='small-banner-content position-absolute'>
<h4>Восхождение легенды!</h4>
<h5>MSI GT77 HX 13V</h5>
</div>
<div className='small-banner-button-price position-absolute'>
<Link href='/' type='button' className='btn btn-outline-secondary'>Купить сейчас!</Link>
<p className='m-0'>305.999₽</p>
</div>
</div>
</div>
</div>
</div>
</section>
I tried applying justify-content-between align-items-center but nothing happened.
.home-wrapper-1 {
background-color: rgb(235, 235, 235);
}
.img-field {
height: 300px;
width: auto;
}
.main-banner-content {
top: 10%;
left: 5%
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-fcf28c);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.main-banner-content h5 {
font-size: 38px;
line-height: 64px;
letter-spacing: -2px;
font-weight: 500;
padding: 0;
color: black;
text-transform: none;
}
.main-banner-button-price {
bottom: 5%;
left: 5%;
}
.main-banner-button-price a{
color: white;
font-size: 20px;
font-weight: 600;
border-radius: 15px;
border: 1px solid var(--color-fcf28c);
background-color: var(--color-474747);
}
.main-banner-button-price a:hover{
background-color: var(--color-474747);
border: 1px solid var(--color-ffe920);
color: var(--color-ffe920);
}
.main-banner-button-price p{
font-size: 18px;
font-weight: 500;
color: black;
text-align: center;
}
/* SMALL */
.small-banner-content {
top: 10%;
left: 5%
}
.small-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-fcf28c);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.small-banner-content h5 {
font-size: 38px;
line-height: 64px;
letter-spacing: -2px;
font-weight: 500;
padding: 0;
color: black;
text-transform: none;
}
.small-banner-button-price {
bottom: 5%;
left: 5%;
}
.small-banner-button-price a{
color: white;
font-size: 20px;
font-weight: 600;
border-radius: 15px;
border: 1px solid var(--color-fcf28c);
background-color: var(--color-474747);
}
.small-banner-button-price a:hover{
background-color: var(--color-474747);
border: 1px solid var(--color-ffe920);
color: var(--color-ffe920);
}
.small-banner-button-price p{
font-size: 18px;
font-weight: 500;
color: black;
text-align: center;
}
It all looks like this:
I tried to do it in one line, but it didn't work.
.home-wrapper-1 {
background-color: rgb(235, 235, 235);
}
.img-field {
height: 300px;
width: auto;
}
.main-banner-content {
top: 10%;
left: 5%
}
.main-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-fcf28c);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.main-banner-content h5 {
font-size: 38px;
line-height: 64px;
letter-spacing: -2px;
font-weight: 500;
padding: 0;
color: black;
text-transform: none;
}
.main-banner-button-price {
bottom: 5%;
left: 5%;
}
.main-banner-button-price a {
color: white;
font-size: 20px;
font-weight: 600;
border-radius: 15px;
border: 1px solid var(--color-fcf28c);
background-color: var(--color-474747);
}
.main-banner-button-price a:hover {
background-color: var(--color-474747);
border: 1px solid var(--color-ffe920);
color: var(--color-ffe920);
}
.main-banner-button-price p {
font-size: 18px;
font-weight: 500;
color: black;
text-align: center;
}
/* SMALL */
.small-banner-content {
top: 10%;
left: 5%
}
.small-banner-content h4 {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: var(--color-fcf28c);
margin: 0 0 12px;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.small-banner-content h5 {
font-size: 38px;
line-height: 64px;
letter-spacing: -2px;
font-weight: 500;
padding: 0;
color: black;
text-transform: none;
}
.small-banner-button-price {
bottom: 5%;
left: 5%;
}
.small-banner-button-price a {
color: white;
font-size: 20px;
font-weight: 600;
border-radius: 15px;
border: 1px solid var(--color-fcf28c);
background-color: var(--color-474747);
}
.small-banner-button-price a:hover {
background-color: var(--color-474747);
border: 1px solid var(--color-ffe920);
color: var(--color-ffe920);
}
.small-banner-button-price p {
font-size: 18px;
font-weight: 500;
color: black;
text-align: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<section class='home-wrapper-1 py-5'>
<div class='container-xxl'>
<div class='row'>
<div class='col-6'>
<div class='main-banner-content p-3 position-relative'>
<img src="https://via.placeholder.com/300" alt='главный баннер' class='img-field' />
<div class='main-banner-content position-absolute'>
<h4>Восхождение легенды!</h4>
<h5>MSI GT77 HX 13V</h5>
</div>
<div class='main-banner-button-price p-6 position-absolute'>
<Link href='/' type='button' class='btn btn-outline-secondary'>Купить сейчас!</Link>
<p class='m-0'>305.999₽</p>
</div>
</div>
</div>
<div class='d-flex flex-wrap
justify-content-between align-items-center'>
<div class='small-banner-content p-3 position-relative'>
<img src="https://via.placeholder.com/300" alt='главный баннер' class='img-field rounded-2' />
<div class='small-banner-content position-absolute'>
<h4>Восхождение легенды!</h4>
<h5>MSI GT77 HX 13V</h5>
</div>
<div class='small-banner-button-price position-absolute'>
<Link href='/' type='button' class='btn btn-outline-secondary'>Купить сейчас!</Link>
<p class='m-0'>305.999₽</p>
</div>
</div>
</div>
</div>
</div>
</section>

How to develop a scroll bar for the center content

I am new to VueJS. I am developing an application using Vue and Bootstrap. The page is broken down into a left sidebar, a top navbar, a center view, and a right sidebar, like this:
I am looking to develop an a scrollbar so that only the center content is scrollable
Here is the code:
import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'
export default {
methods:{
changeView(){
if(this.gridView === true){
this.gridView = false;
}
else if(this.gridView === false){
this.gridView = true;
}
},
openDetailsSection() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
showSection.style.width = "80%";
// showSection.classList.remove("col-xl-12", "col-md-6");
})
},
closeDetailsSection(){
if(detailsSectionOpen === true){
detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.remove("col-xl-3");
showSection.classList.remove("col-xl-9", "col-md-6");
showSection.classList.add("col-xl-12", "col-md-6");
// Remove info button
const infoButton = document.getElementById('infoButton');
if (infoButton) {
infoButton.parentNode.removeChild(infoButton);
}
},
},
data(){
return {
detailsSectionOpen: false,
gridView: true,
shared: false
}
},
components: {
ListView,
GridView,
DetailsView
},
mounted(){
let folders = document.getElementsByClassName('folder-rectangle');
folders = Array.from(folders);
folders.forEach((folder) => folder.addEventListener('click', this.showButton));
}
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}
.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}
li .btn:hover{
color: #E91E63;
}
.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}
#context-menu-icon{
color: #424242;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
#image {
height: 16px;
border: 0px;
color: #878D99;
}
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}
.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}
.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}
.context-menu-span{
padding-left: 10px;
color: #424242;
}
.btn{
background-color: none;
border: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
#no-padding{
padding: 0px;
}
#grid-view{
overflow-y: scroll;
}
#grid-view::-webkit-scrollbar {
width: 1em;
}
#grid-view::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#grid-view::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<template>
<div>
<div class="content" style="padding-top: 3px;" id="show">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
<button v-if="!detailsSectionOpen" class="btn" id="infoButton" #click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
<div>
<!-- Grid view secation begins here -->
<grid-view v-if="gridView === true" :folders="folders" :recentFiles="recentFiles" id="grid-view" >
</grid-view>
<!-- List View section begins here -->
<list-view v-if="gridView === false" :folders="folders" :recentFiles="recentFiles">
</list-view>
</div>
</div>
</div>
<details-view v-if="detailsSectionOpen" id="details"></details-view>
</div>
</template>
I am trying to develop a scrollbar for the id="show", such that the content between the 2 bars is scrollable, but I am unable to so so.
Can someone please help me out here? I'd really appreciate any help. Thanks!

set a fixed height and use the overflow-y, a example:
#show {
height: 600px;
overflow-y: scroll;
}

Onclick function not working on first click

I have created a side popup in my website, but I have an issue. It works fine, but only on the second click. I want it to work on the first click. When I click on it two times, it works. I already tried some other blogs tricks but it's not working.
What's going wrong?
I created it using simple JS, you can see my code below:
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
View on Codepen

Your code checks for a style attribute of right:-300px. Since there is no style attribute on #popup on load, the first click only sets a style attribute of right:-300px. Then, the second click sets it to "0", etc.
Note that style references the element's inline style and does not reference CSS applied by class.
I had some success by setting a default style attribute of -300px.
function openNav() {
navMenuStatus = document.getElementById('popup').style.right;
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup" style="right:-300px">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Alternatively, you could use getComputedStyle to find the right property set in your stylesheet.
function openNav() {
navMenuStatus = window.getComputedStyle(document.getElementById('popup'), null).getPropertyValue('right');
if (navMenuStatus == '-300px') {
document.getElementById('popup').style.right = '0px';
} else {
document.getElementById('popup').style.right = '-300px';
}
}
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: -300px;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
<div class="popup" id="popup">
<div class="pmenu" onclick="openNav()">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>
Perhaps better yet, use toggle() to toggle the element's CSS class in classList, as recommended by Arash Kazemi.
var trigger = document.getElementById('popup_trigger');
var popup = document.getElementById('popup');
function openNav() {
popup.classList.toggle('hide');
}
trigger.addEventListener('click', openNav);
.pmenu {
cursor: pointer;
width: 70px;
font-weight: 600;
color: #fff;
float: left;
}
.pmenu img {
padding: 5px 11px;
background-color: #fff000;
}
.pmenu p {
text-align: center;
padding: 10px 4px;
background-color: #356381;
margin: 0 0 0px;
font-size: 14px;
}
.pbody {
color: #fff;
float: left;
width: 300px;
background-color: #356381;
border-left: 5px solid #fff000;
}
.pbody p {
text-align: center;
font-size: 15px;
margin: 10px;
}
.pbody h4 {
text-align: center;
font-weight: 600;
margin: 0px;
color: #000;
background-color: #fff000;
padding: 10px 0px;
}
.pbody h5 {
font-size: 15px;
text-align: center;
background: #193e56;
padding: 15px;
}
.address {
text-align: center;
}
.address h6 {
color: #356381;
background-color: #fff000;
font-size: 14px;
padding: 10px 0px 10px 10px;
margin-top: 0px;
min-width: 245px;
text-align: left;
}
.aicon {
float: left;
width: 50px;
background-color: #193e56;
color: #fff;
padding: 14px 12px;
}
.aadd {
float: left;
color: #fff;
}
.popup {
position: absolute;
right: 0;
top: 20px;
z-index: 3;
transition: 0.3s all;
}
.popup.hide {
right: -300px;
}
<div class="popup hide" id="popup">
<div class="pmenu" id="popup_trigger">
<p>GET THE<br/>BOOK</p>
<img src="del.png">
</div>
<div class="pbody">
<h4>HOW TO GET THE PHONEBOOK</h4>
<p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>
<h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>
<div class="address">
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>
</div>
<div class="aicon">
<i class="fa fa-map-marker"></i>
</div>
<div class="aadd">
<h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>
</div>
</div>
</div>
</div>

Because document.getElementById('popup').style.right is empty the first time you read it. The rule is not set for the element with id popup, instead it is set for the element with class popup.
A dirty quick solution would be checking for its equality with "0px". But a better way would be defining a class name .opened-popup with right equal to 0px. Then toggle that class on click. Like this:
function openNav() {
document.getElementById('popup').classList.toggle("opened-popup");
}
Look at this for a good solution:
https://codepen.io/anon/pen/EpyWQm

How to make width of nested CSS elements all the same?

Below is my implementation of some HTML and CSS that I created. I am having trouble with the width of some buttons within my container div. I want it so that somehow I can always ensure that width of the button elements are always 50% of what the div that it is in. This is the image I wanted to recreate:
https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png
Here is my attempt:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 100px;
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 100px;
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
The problem I am having is with the save-button and share-button, but also the give-button and giving-input classes. I don't necessarily want to hard code the width here to make it so that they align properly. Rather, if there is a programmatic way so that I can set them to width: 50% of the parent div, as opposed to hard coding the widths that would be great. I tried to set the class .give {width: 100%} and then set the .giving-input, .give-button, .save-button, .share-button: {width: 50%} but that didn't work for me. Any tips or help would be appreciated. Thanks!

If you set all inputs/buttons width to 49% and remove the margin-left you had there everything should work (I also changed one of your containers from inline-block back to block to make sure it takes 100% of the width).
Here is the fix to your code:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 49%;
font-weight: bold;
padding: 10px;
}
.give {
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 49%;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50" />
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>

you can split that in to 2 pieces ,each have width 50%.but here also applying a padding of 10px ,so you can use the function calc(50% - 10px); to get the exact value.
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: calc(50% - 10px);
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: calc(50% - 10px);
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>

Prevent the submenu hiding when clicking on the form to sign in / Change background color when parent li is clicked

I have a nav menu which has dropdown lists, and I have two problems atm:
I have the menu that when you click on a parent li, it will show its submenu, and when you click on another parent li or elsewhere in the page, it will hide.
On the first li.parent, i have a login form. The code I have won't let me click on the form to enter the login details. It will hide if I click on it.
How can I fill in the login form or click on it without it being hidden? But when I click elsewhere on the page it will close?
And
2) I want to have the li.parent to change its background color when I open one of its submenu. And return to his normal background color when closing the submenu.
//HEADER NAV-BAR SCRIPTS:
//Show Submenus when clicking on Parent / Hide Submenus when clicking other parent/elsewhere
function hide_sub_navs() {
$('.parent ul').hide().removeClass("shown");
}
$(function() {
hide_sub_navs();
$(".parent").click(function(event) {
event.stopPropagation();
var clicked = this;
var sub_menu = $(clicked).find("ul");
if (sub_menu.hasClass("shown")) {
sub_menu.hide().removeClass("shown");
} else {
sub_menu.show().addClass("shown");
$(".parent").each(function() {
var next_li = this;
if (next_li != clicked) {
$(next_li).find("ul").hide().removeClass("shown");
}
});
}
});
$(window).click(hide_sub_navs);
});
/** NAV MENU **/
div#nav-bar {
float: right;
display: inline-block;
height: 34px;
width: 40%;
clear: right;
padding: 0px 20px;
background-color: #FFF;
overflow: hidden;
}
/** Main Menu **/
div#nav-bar ul {
position: absolute;
right: 0px;
top: 0;
bottom: 0;
padding: 0px auto;
margin-top: 7px;
margin-bottom: 0;
margin-right: 10px;
margin-left: auto;
text-align: center;
width: auto;
height: 25px;
list-style-type: none;
font-family: Roboto, sans-serif;
background-color: #FFF;
display: block;
}
/** Titles **/
div#nav-bar ul li.title, li.parent {
display: inline-block;
height: 28px;
width: auto;
line-height: 28px;
padding: 0px 5px;
margin: 0px 5px;
position: relative;
border-radius: 3px;
font-weight: 800;
color: #005D96;
font-size: 14px;
}
/*Change Main Menu li background when hovering*/
div#nav-bar ul li:hover {
background-color: rgba(0, 184, 227, 0.1);
}
div#nav-bar ul li div#register li:hover {
background-color: inherit;
}
div#nav-bar ul#mainmenu li a#home {
display: inline-block;
text-decoration: none;
color: inherit;
width: auto;
height: 28px;
margin: 0px 5px;
padding: 0px 5px;
font-weight: 800;
color: #005D96;
font-size: 14px;
line-height: 28px;
position: relative;
border-radius: 3px;
}
/** Submenus **/
div#nav-bar ul ul {
height: 0 auto;
width: 0 auto;
position: absolute;
z-index: 1000;
background-color: #004469;
margin-top: 28px;
margin-right: 0px;
margin-left: 0px;
padding: 0px 10px;
border-radius: 3px;
display: none;
}
div#nav-bar ul ul li.child-element {
background-color: transparent;
font-weight: lighter;
font-size: 12.5px;
color: #FFF;
display: inline-block;
float: left;
height: 25px;
width: auto;
text-align: left;
line-height: 30px;
margin-top: 5px;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
padding: 0px 10px;
border-radius: 3px;
}
div#nav-bar ul ul li a {
display: inline-block;
text-decoration: none;
color: inherit;
height: 27px;
font-weight: lighter;
color: #FFF;
font-size: 12.5px;
border-radius: 3px;
}
/** Submenu 1 - Account **/
div#nav-bar ul ul#submenu1 {
width: 190px;
height: 240px;
}
/*SUBMENU 1 - LOGIN FORM*/
form {
border: none;
font-weight: lighter;
}
form p {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.9em;
text-align: center;
line-height: 20px;
height: 15px;
float: center;
margin-top: 10px;
}
form label b {
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
font-size: 0.8em;
line-height: 20px;
height: 15px;
float: left;
}
input[type=text], input[type=password] {
width: 100%;
margin: 0px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: rgba(0, 208, 244, 1);
color: white;
font-size: 0.8em;
padding: 5px 5px;
margin-top: 10px;
margin-bottom: 0px;
border: none;
cursor: pointer;
width: 30%;
float: right;
}
div#rememberme {
font-size: 0.8em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
float: left;
padding: 0 10px;
margin: 8px 0;
}
div#forgotpsw p {
height: 20px;
width: auto;
position: relative;
top: -10px;
float: right;
font-family: Roboto, sans-serif;
font-size: 0.8em;
font-weight: lighter;
color: #FFF;
line-height: 15px;
}
div#forgotpsw p a.forgot {
display: inline-block;
height: auto;
text-decoration: underline;
width: auto;
font-family: Roboto, sans-serif;
font-size: 1em;
font-weight: lighter;
padding: 0px 2px;
}
/*Register*/
div#register {
display: inline-block;
margin-top: -10px;
width: 210px;
height: 50px;
position: relative;
left: -10px;
border-radius: 3px;
background-color: #00598A;
font-weight: lighter;
}
div#register li p.register {
font-size: 0.85em;
font-family: Roboto, sans-serif;
color: #FFF;
font-weight: lighter;
margin: 0px 10px;;
height: 50px;
line-height: 25px;
text-align: center;
}
div#register li p a.register {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: underline;
text-decoration-color: #FFF;
font-family: Roboto, sans-serif;
font-size: 1em;
}
.container {
padding: 0;
padding-bottom: 10px;
height: 170px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
}
/** Submenu 2 - Manage Bookings **/
div#nav-bar ul ul#submenu2 {
width: 170px;
height: 130px;
}
/** Submenu 3 - Support **/
div#nav-bar ul ul#submenu3 {
width: 140px;
height: 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="nav-bar">
<ul id="mainmenu">
<li class="title"><a href="index.html" id="home" >Home</a></li>
<li class="parent">Account
<ul id="submenu1">
<!--Login Form-->
<form>
<div class="container">
<p>Log-in to Access your Account</p>
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<div id="rememberme">
<input type="checkbox" checked="checked ">Remember me
</div>
<!--Forgot Password-->
<div id="forgotpsw">
<li class="forgot">
<p>Forgot <a class="forgot" href="forgot.html">Password</a> ?</p>
</li>
</div>
</div>
</form>
<!--Register-->
<div id="register">
<li>
<p class="register">Don't have an account yet? Click
<a class="register" href="register.html">here</a> to Register.</p>
</li>
</div>
</ul>
</li>
<li class="parent">Manage Bookings
<ul id="submenu2">
<li class="child-element">Itineraries</li>
<li class="child-element">Manage my Flights</li>
<li class="child-element">Manage Hotel Bookings</li>
<li class="child-element">Travel Documents</li>
</ul>
</li>
<li class="parent">Support
<ul id="submenu3">
<li class="child-element">Customer Service</li>
<li class="child-element">Feedback</li>
</ul>
</li>
</ul>
</div>
</body>

Okay, I came up with this code, will it work well?? It worked for me on Boostrap Studio.
changed html li.parent elements to:
<li id="account" class="parent">Account
<li id="bookings" class="parent">
<li id="support" class="parent">Support
I added an id to each parent li. Also, each of its submenu has an id (#submenu1, #submenu2, #submenu3).
This is the script i used to keep the submenu open while I'm clicking anywhere inside it, and closing it if i click a different parent or anywhere else in html file.
$('html, .parent').click(function() {
$('#submenu1').hide();
});
$('#mainmenu, #submenu1').click(function(event) {
event.stopPropagation();
});
$('#account').click(function(event) {
$('#submenu1').toggle();
});
$('html, .parent').click(function() {
$('#submenu2').hide();
});
$('#mainmenu, #submenu2').click(function(event) {
event.stopPropagation();
});
$('#bookings').click(function(event) {
$('#submenu2').toggle();
});
$('html, .parent').click(function() {
$('#submenu3').hide();
});
$('#mainmenu, #submenu3').click(function(event) {
event.stopPropagation();
});
$('#support').click(function(event) {
$('#submenu3').toggle();
});