We Keep Coding

onClick input box, focus on the input box and overlay on the screen

I am trying to achieve something with HTML and CSS
The initial state of the page should be like the initialState
onClicking the the search box the state of the page should be after Onclick
I am trying to implement it in Angular.
So far what I have implemented is intitalState implemented initial
and after click implemented After click
<div class="search-box" [ngClass]="isOverlay ? 'focus' : 'no-focus'">
<input class="search-text" type ="text" placeholder="Search...">
<a class="search-btn" (click)="toggleOverlay()">
<p class="search"><i class="fas fa-search"></i></p>
</a>
</div>
.search-box {
border-radius: 40px;
padding-top: 10px;
height: 60px;
padding-left: 15px;}
.search-btn {
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
cursor: pointer;}
Overlay html
<div *ngIf="isOverlay" (click)="toggleOverlay()" class="overlay-container"></div>
overlay css
.overlay-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(19, 16, 16, 0.7);
z-index: 998;}
My question is how can I highlight and focus the search textbox when I add overlay currently it hides behind the overlay when I togggle the overlay. I tried z-index to the searchbox onclick but it did not work. Any ideas?

It looks like what you'll need to add some css to your search box for when the overlay is active. Essentially you want to update the z-index of your search box so that it's above your overlay.
search-box {
&.focus {
position: relative;
z-index: 999;
}

How to close Hamburger menu with close icon

I have set up a hamburger menu with a close icon already. I'm just not sure how to just turn off the hamburger menu with a simple click. Only thing I've been able to do is just reload the page completely. Perhaps there is some jquery that could be used to solve this issue.
The close menu button is item 1 in the menu list.
Here is my code.
<div class="menu-wrapper">
<nav>
<ul class="header-menu">
<li><i class="far fa-window-close"></i></li>
<li class="current">Home</li>
<li>Prints</li>
<li>Blog</li>
<li>Tutorials</li>
<li>Sports</li>
</ul>
</nav>
</div>
CSS:
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../img/menu-icon.png) center;
text-decoration: none;
}
#close-menu {
display: none;
}
#media only screen and (max-width: 600px) {
#menu-icon {
display:inline-block;
z-index: 10000;
}
#close-menu {
display: inline-block;
color: black !important;
font-size: 20px !important;
}

OK, here's an example of how to make a burger nav. Fiddle
HTML:
<nav data-state=closed>
<a>×</a>
<a href=something.html>Link 1</a>
<a href=something-else.html>Link 2</a>
<a href=etc.html>Link 3</a>
</nav>
See how we're preparing to toggle the open/closed state with a data attribute. (We could have used a class, but I prefer a DA in this case because it means we can toggle it; with a class, you'd have to remove one class and add anothe, e.g. remove 'closed' and add 'open'.)
The structure is simple; we use a nav element and use the first a within it as the close icon. We use the multiplication (times) entity for this.
CSS:
nav {
position: absolute;
right: 1rem;
top: 2rem;
padding: 1rem;
background-color: #d55 !important;
}
nav[data-state=closed] {
cursor: pointer;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/220px-Hamburger_icon.svg.png') no-repeat 100%/100%;
width: 50px;
height: 50px;
}
nav a { display: block; }
nav a:not(:first-of-type) { border-bottom: solid 1px rgba(0, 0, 0, .2); padding: .8rem 0; }
nav[data-state=closed] * { display: none; }
nav a:first-of-type {
position: absolute;
right: .2rem;
top: -.1rem;
font-size: 2rem;
cursor: pointer;
font-weight: bold;
}
Now here's the key part, the JS:
//get nav element
let nav = $('nav');
//listen for clicks on it
nav.on('click', evt => {
//...get current state (open vs. closed)
let curr_state = nav.attr('data-state');
//...if open, and click was NOT to close icon (first A tag) ignore click
if (curr_state == 'open' && !$(evt.target).is('a:first-of-type')) return;
//...otherwise toggle state (open it or close it)
nav.attr('data-state', curr_state == 'closed' ? 'open' : 'closed');
})

Sticky Navbar on scroll

I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>

Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});

.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.

Animate increase size of div with JQuery/CSS

I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!

Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>

Jquery & CSS - Overlapping divs

I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});

Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}

I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.