Responsive CSS Topnav with dropdown not working on samll screens

Responsive CSS Topnav with dropdown not working on samll screens - javascript

I am trying to learn how to make a responsive CCS page and is following a tutorial on W3schools (https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp)
I have coded my version and all works good on Desktop size, however when I try to go to Iphone5/Iphone6/Ipad sizes the menu dont show after clicking on the button with the javascript.
I am stuck and have tried my best to find out why it wont work as the one on the tutorial - can somebody help/guide me to what that needs to change for?
My html looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>My page</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Noto+Sans:400,400i,700,700i" rel="stylesheet">
<link href="../style/style.css" rel="stylesheet">
</head>
<body>
<!-- topp logo start -->
<div class="logo">
<img src="../bilder/logo.gif" alt="Logo">
<p>Some header text</p>
</div><!-- topp logo slutt --><!-- Menu start -->
<div>
<nav>
<div class="topnav" id="myTopnav">
<a class="active" href="/Test.htm">Startpage</a>
<div class="dropdown">
<button class="dropbtn">Group1 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
Option1
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Group2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Option1
Option1
Option1
Option1
Option1
Option1
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Group3 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Option1
Option1
Option1
Option1
</div>
</div><a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size:15px;">☰</a>
</div>
</nav>
</div>
<script>
function myFunction() { var x = document.getElementById("myTopnav");
if (x.className === "topnav") { x.className += " responsive"; }
else { x.className = "topnav"; } }
</script>
<!-- menu end -->
<div class="sesbanner">
<picture>
<source media='(min-width: 401px)' srcset='sesbanner/big.jpg'>
<source media='(max-width: 400px)' srcset='sesbanner/tall.jpg'>
<img src='sesbanner/small.jpg'></picture>
<div class="sestext">
SUBJECT<br>
2019
</div>
<div class="sesliten">
Choose option from above menu.
</div>
</div>
<div class="adressbar">
<h3>Company</h3><br>
<br>
Adr1<br>
Adr2<br>
ZIP City<br>
<br>
Phone: +11 11 11 11<br>
Fax: +22 22 22 22<br>
<br>
Email: post#site.com<br>
</div><!-- Footer -->
<div class="footer">
©All rights reserved 2019.
<center>
<table id="footertabell">
<tr>
<td>Made by me</td>
</tr>
</table>
</center>Some text.<br>
Some more text.
</div><!-- END -->
</body>
</html>
and the css style file like this:
h1{
font-size: 2.25em;
line-height: 2.25em;
font-family: 'Fjalla One', sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 1.875em;
line-height: 2em;
font-family: 'Fjalla One', sans-serif;
}
h3{
font-size: 1.25em;
line-height: 1.375em;
font-family: 'Fjalla One', sans-serif;
}
h4{
font-size: 1em;
line-height: 1.125em;
font-family: 'Fjalla One', sans-serif;
}
h5{
font-size: 0.875em;
line-height: 1em;
font-family: 'Fjalla One', sans-serif;
}
h6{
font-size: 0.75em;
line-height: 0.875em;
font-family: 'Fjalla One', sans-serif;
}
.paragraph {
font-size: 0.875em;
line-height: 1em;
font-family: 'Noto Sans', sans-serif;
}
.medium {
font-size: 0.875em;
line-height: 1em;
font-family: 'Noto Sans', sans-serif;
text-align: center;
color: darkgray;
}
.liten {
font-size: 0.5625em;
line-height: 0.625em;
font-family: 'Noto Sans', sans-serif;
}
p.bold {
font-weight: 600;
}
.logo {
max-width: 100%;
max-height: 100%;
text-align: center;
background-color: black;
font-family:'Fjalla One', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 2.00em;
color: white;
}
.vgrtema{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
max-width: 100%;
max-height: 100%;
background-color: #e7e7e7;
}
.vgrtema.img {
max-width: 100%;
max-height: 100%;
}
.vgrtextheader {
font-family:'Fjalla One', sans-serif;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
font-size: 1.75em;
color: black;
text-align: center;
vertical-align: middle;
line-height: 1.5em;
}
.sesbanner {
position: relative;
text-align: center;
color: white;
background-color: black;
}
.sestext {
font-family:'Fjalla One', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 3em;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sesliten {
font-family: 'Noto Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 1em;
text-transform: uppercase;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
}
/*Menu start */
nav {margin:0;
font-family:'Fjalla One', sans-serif;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
font-size: 1.00em;
background-color: black;
}
/* Add a black background color to the top navigation */
.topnav {
overflow: hidden;
background-color: darkgray;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: darkgray;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one
("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
/*Menu end */

Related

Anchor tag attribute

Below is the code for my website. I am working on it to make the navbar responsive. But in the small screen size, the navbar button acts weirdly, as soon as I click on it it redirects to the top instead of showing the list items. Instead what I want it to do is to expand and show all the other list items of the navbar. But I am unable to do so. Can someone help me with this?
function responsiveNavbar() {
let navItems = document.querySelectorAll(".navbar li");
if (navItems[1].classList == "responsive-navbar") {
navItems.forEach(function(navItem) {
navItem.classList.remove(" responsive-navbar");
});
} else {
navItems.forEach(function(navItem) {
navItem.classList.add("responsive-navbar");
});
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
box-sizing: inherit;
color: #777;
background-color: #E0E2DB;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
scroll-behavior: inherit;
}
.clearfix {zoom: 1;}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */
/* Grids */
.row {
width: 80%;
margin: 0 auto;
}
.span-1-of-2 {
width: 48%;
float: left;
}
/* HTML contents */
h1, h2.header-heading, h2, h3, h5 {
margin: 0;
text-transform: uppercase;
}
h1 {
font-size: 4.5rem;
color: #E0E2DB;
letter-spacing: .4rem;
word-spacing: .5rem;
font-weight: 300;
}
h2 {
font-size: 3.5rem;
color: #3D348B;
letter-spacing: .3rem;
}
h3 {
font-size: 2.6rem;
color: #000;
}
h4 {
font-size: 2.2rem;
color: #E0E2DB;
}
h5 {
font-size: 2rem;
margin-bottom: .5rem;
color: #191716;
}
/* Links */
a {
text-decoration: none;
display: inline-block;
}
/* Icons */
.icon-small {
font-size: 2rem;
color: #3D348B;
margin-right: 1rem;
}
/* Buttons */
.btn {
border: 1px solid #E6AF2E;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
color: #E0E2DB;
background-color: transparent;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn:hover {
background-color: #E6AF2E;
color: #191716;
}
.btn2 {
background-color: #3D348B;
color: #E0E2DB;
border: 1px solid #3D348B;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn2:hover {
background-color: #E0E2DB;
color: #191716;
}
/* Utility classes */
.u-margin-top-small {
margin-top: 2.5rem;
}
.u-margin-top-medium {
margin-top: 5rem;
}
.u-margin-top-big {
margin-top: 7.5rem;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
}
.u-text-align-center {
text-align: center;
}
.u-inline-block {
display: inline-block;
}
/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */
header {
background-color: #3D348B;
height: 100vh;
}
.hero-text-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
h2.header-heading {
font-size: 3.5rem;
margin-top: 2rem;
color: #E6AF2E;
font-weight: 400;
}
h2.slogan {
color: #E6AF2E;
font-size: 2.8rem;
font-weight: 400;
}
/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */
.navigation {
position: relative;
border-bottom: .5px solid #777;
transition: all .5s;
}
.logo-box {
float: left;
}
.logo img {
width: 6rem;
height: auto;
margin-left: 2rem;
border-radius: 50%;
}
nav {
padding: .5rem;
}
.navbar {
float: right;
list-style: none;
margin-right: 10rem;
margin-top: 1.5rem;
}
.navbar li {
display: inline-block;
}
.navbar li a {
margin: 0 1rem;
padding: .2rem .6rem;
color: black;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.navbar li a:hover {
border-bottom: 2px solid #E6AF2E;
transition: all .3s;
}
.navbar .nav-icon {
display: none;
transition: all .3s;
}
/* The sticky navbar */
.sticky {
position: fixed;
background-color: #3D348B;
top: 0;
width: 100%;
box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
}
.sticky .navbar-lists {
color: #E0E2DB;
}
.sticky .logo {
color: #E0E2DB;
}
/* Responsive navbar */
.responsive-navbar {
display: block;
text-align: right;
}
/* ------------------------------------- */
section {
padding: 8rem;
}
/* ------------------------------------- */
/* ------------------------------------- */
/* THE ABOUT SECTION */
/* ------------------------------------- */
.about-section {
padding: 0;
margin-top: 12rem;
}
.long-text {
width: 70%;
margin: 2.5rem auto 0;
}
.profile-image {
height: 35rem;
width: auto;
}
.my-info-img {
text-align: right;
padding-right: 15rem;
}
.my-info-list {
list-style: none;
}
.my-info-list > li {
margin-bottom: 1.2rem;
}
/* ------------------------------------- */
/* MEDIA QUERIES SECTION */
/* ------------------------------------- */
#media only screen and (max-width: 720px) {
html {
font-size: 50%;
}
.remove-heading {
display: none;
}
.logo img {
width: 5rem;
margin-top: 1rem;
}
/* Responsive navbar */
.navbar li {
display: none;
}
.navbar .nav-icon {
color: #000;
display: block;
font-size: 20px;
}
.sticky .navbar .nav-icon {
display: block;
color: #fff;
font-size: 20px;
}
.navbar .nav-icon:hover {
color: #2f2f2f;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Favicon link -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Icons link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<!-- Rubik font link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<!-- CSS links -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<title>Arun Bohra - Design Business Solutions</title>
</head>
<body>
<header id="header">
<div class="hero-text-box u-text-align-center u-inline-block">
<h1><span class="remove-heading">Hello</span> I'm Arun</h1>
<h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
<h2 class="slogan u-margin-top-small">Design business solutions</h2>
Who am I
</div>
</header>
<div class="navigation">
<nav class="clearfix">
<div class="logo-box">
<a href="#header" class="logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<ul class="navbar">
<i class="fas fa-bars" id="responsive-nav-btn"></i>
<li>Home</li>
<li>About me</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="about-section" id="about">
<h2 class="u-text-align-center">Who am I</h2>
<p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p>
<div class="row clearfix u-margin-top-big my-info-box">
<div class="span-1-of-2 my-info-img">
<img src="img/profile.png" alt="Profile image" class="profile-image">
</div>
<div class="span-1-of-2 my-info-text">
<h3 class="u-margin-bottom-medium">I design awesome websites</h3>
<ul class="my-info-list u-margin-bottom-medium">
<li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li>
<li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li>
</ul>
Download CV
</div>
</div>
</section>
</body>
</html>

You can use onclick(event) to help locate the clicked item, and find its all siblings.
classList is a list, which can't be compared with ==, but with contains().
My snippet can switch the "responsive-navbar" class for the li elements, but the css classes may be missing some properties. I'm not sure.
function responsiveNavbar(e) {
e.preventDefault();
let navItem = e.target.parentNode.nextElementSibling;
while(navItem && navItem.tagName.toLowerCase() == 'li'){
if (navItem.classList.contains("responsive-navbar")) {
navItem.classList.remove("responsive-navbar");
} else {
navItem.classList.add("responsive-navbar");
}
navItem = navItem.nextElementSibling;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
box-sizing: inherit;
color: #777;
background-color: #E0E2DB;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
scroll-behavior: inherit;
}
.clearfix {zoom: 1;}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */
/* Grids */
.row {
width: 80%;
margin: 0 auto;
}
.span-1-of-2 {
width: 48%;
float: left;
}
/* HTML contents */
h1, h2.header-heading, h2, h3, h5 {
margin: 0;
text-transform: uppercase;
}
h1 {
font-size: 4.5rem;
color: #E0E2DB;
letter-spacing: .4rem;
word-spacing: .5rem;
font-weight: 300;
}
h2 {
font-size: 3.5rem;
color: #3D348B;
letter-spacing: .3rem;
}
h3 {
font-size: 2.6rem;
color: #000;
}
h4 {
font-size: 2.2rem;
color: #E0E2DB;
}
h5 {
font-size: 2rem;
margin-bottom: .5rem;
color: #191716;
}
/* Links */
a {
text-decoration: none;
display: inline-block;
}
/* Icons */
.icon-small {
font-size: 2rem;
color: #3D348B;
margin-right: 1rem;
}
/* Buttons */
.btn {
border: 1px solid #E6AF2E;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
color: #E0E2DB;
background-color: transparent;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn:hover {
background-color: #E6AF2E;
color: #191716;
}
.btn2 {
background-color: #3D348B;
color: #E0E2DB;
border: 1px solid #3D348B;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn2:hover {
background-color: #E0E2DB;
color: #191716;
}
/* Utility classes */
.u-margin-top-small {
margin-top: 2.5rem;
}
.u-margin-top-medium {
margin-top: 5rem;
}
.u-margin-top-big {
margin-top: 7.5rem;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
}
.u-text-align-center {
text-align: center;
}
.u-inline-block {
display: inline-block;
}
/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */
header {
background-color: #3D348B;
height: 100vh;
}
.hero-text-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
h2.header-heading {
font-size: 3.5rem;
margin-top: 2rem;
color: #E6AF2E;
font-weight: 400;
}
h2.slogan {
color: #E6AF2E;
font-size: 2.8rem;
font-weight: 400;
}
/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */
.navigation {
position: relative;
border-bottom: .5px solid #777;
transition: all .5s;
}
.logo-box {
float: left;
}
.logo img {
width: 6rem;
height: auto;
margin-left: 2rem;
border-radius: 50%;
}
nav {
padding: .5rem;
}
.navbar {
float: right;
list-style: none;
margin-right: 10rem;
margin-top: 1.5rem;
}
.navbar li {
display: inline-block;
}
.navbar li a {
margin: 0 1rem;
padding: .2rem .6rem;
color: black;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.navbar li a:hover {
border-bottom: 2px solid #E6AF2E;
transition: all .3s;
}
.navbar .nav-icon {
display: none;
transition: all .3s;
}
/* The sticky navbar */
.sticky {
position: fixed;
background-color: #3D348B;
top: 0;
width: 100%;
box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
}
.sticky .navbar-lists {
color: #E0E2DB;
}
.sticky .logo {
color: #E0E2DB;
}
/* Responsive navbar */
.responsive-navbar {
display: block;
text-align: right;
}
/* ------------------------------------- */
section {
padding: 8rem;
}
/* ------------------------------------- */
/* ------------------------------------- */
/* THE ABOUT SECTION */
/* ------------------------------------- */
.about-section {
padding: 0;
margin-top: 12rem;
}
.long-text {
width: 70%;
margin: 2.5rem auto 0;
}
.profile-image {
height: 35rem;
width: auto;
}
.my-info-img {
text-align: right;
padding-right: 15rem;
}
.my-info-list {
list-style: none;
}
.my-info-list > li {
margin-bottom: 1.2rem;
}
/* ------------------------------------- */
/* MEDIA QUERIES SECTION */
/* ------------------------------------- */
#media only screen and (max-width: 720px) {
html {
font-size: 50%;
}
.remove-heading {
display: none;
}
.logo img {
width: 5rem;
margin-top: 1rem;
}
/* Responsive navbar */
.navbar li {
display: none;
}
.navbar .nav-icon {
color: #000;
display: block;
font-size: 20px;
}
.sticky .navbar .nav-icon {
display: block;
color: #fff;
font-size: 20px;
}
.navbar .nav-icon:hover {
color: #2f2f2f;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Favicon link -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Icons link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<!-- Rubik font link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<!-- CSS links -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<title>Arun Bohra - Design Business Solutions</title>
</head>
<body>
<header id="header">
<div class="hero-text-box u-text-align-center u-inline-block">
<h1><span class="remove-heading">Hello</span> I'm Arun</h1>
<h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
<h2 class="slogan u-margin-top-small">Design business solutions</h2>
Who am I
</div>
</header>
<div class="navigation">
<nav class="clearfix">
<div class="logo-box">
<a href="#header" class="logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<ul class="navbar">
<i class="fas fa-bars" id="responsive-nav-btn"></i>
<li>Home</li>
<li>About me</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="about-section" id="about">
<h2 class="u-text-align-center">Who am I</h2>
<p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p>
<div class="row clearfix u-margin-top-big my-info-box">
<div class="span-1-of-2 my-info-img">
<img src="img/profile.png" alt="Profile image" class="profile-image">
</div>
<div class="span-1-of-2 my-info-text">
<h3 class="u-margin-bottom-medium">I design awesome websites</h3>
<ul class="my-info-list u-margin-bottom-medium">
<li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li>
<li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li>
</ul>
Download CV
</div>
</div>
</section>
</body>
</html>

From an inline event handler, you need to pass the event yourself like onclick="responsiveNavbar(event)" then you can call event.preventDefault(); to stop the movement.
The class responsive-navbar gets added and removed correctly with code below.
function responsiveNavbar(event) {
event.preventDefault();
let navItems = document.querySelectorAll(".navbar li");
navItems.forEach(function(navItem) {
navItem.classList.toggle("responsive-navbar");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
body {
box-sizing: inherit;
color: #777;
background-color: #E0E2DB;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.5;
scroll-behavior: inherit;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */
/* Grids */
.row {
width: 80%;
margin: 0 auto;
}
.span-1-of-2 {
width: 48%;
float: left;
}
/* HTML contents */
h1,
h2.header-heading,
h2,
h3,
h5 {
margin: 0;
text-transform: uppercase;
}
h1 {
font-size: 4.5rem;
color: #E0E2DB;
letter-spacing: .4rem;
word-spacing: .5rem;
font-weight: 300;
}
h2 {
font-size: 3.5rem;
color: #3D348B;
letter-spacing: .3rem;
}
h3 {
font-size: 2.6rem;
color: #000;
}
h4 {
font-size: 2.2rem;
color: #E0E2DB;
}
h5 {
font-size: 2rem;
margin-bottom: .5rem;
color: #191716;
}
/* Links */
a {
text-decoration: none;
display: inline-block;
}
/* Icons */
.icon-small {
font-size: 2rem;
color: #3D348B;
margin-right: 1rem;
}
/* Buttons */
.btn {
border: 1px solid #E6AF2E;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
color: #E0E2DB;
background-color: transparent;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn:hover {
background-color: #E6AF2E;
color: #191716;
}
.btn2 {
background-color: #3D348B;
color: #E0E2DB;
border: 1px solid #3D348B;
border-radius: .3rem;
font-size: 1.6rem;
padding: 1.2rem 3.5rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: .3rem;
transition: all .3s;
}
.btn2:hover {
background-color: #E0E2DB;
color: #191716;
}
/* Utility classes */
.u-margin-top-small {
margin-top: 2.5rem;
}
.u-margin-top-medium {
margin-top: 5rem;
}
.u-margin-top-big {
margin-top: 7.5rem;
}
.u-margin-bottom-small {
margin-bottom: 2rem;
}
.u-margin-bottom-medium {
margin-bottom: 4rem;
}
.u-text-align-center {
text-align: center;
}
.u-inline-block {
display: inline-block;
}
/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */
header {
background-color: #3D348B;
height: 100vh;
}
.hero-text-box {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
h2.header-heading {
font-size: 3.5rem;
margin-top: 2rem;
color: #E6AF2E;
font-weight: 400;
}
h2.slogan {
color: #E6AF2E;
font-size: 2.8rem;
font-weight: 400;
}
/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */
.navigation {
position: relative;
border-bottom: .5px solid #777;
transition: all .5s;
}
.logo-box {
float: left;
}
.logo img {
width: 6rem;
height: auto;
margin-left: 2rem;
border-radius: 50%;
}
nav {
padding: .5rem;
}
.navbar {
float: right;
list-style: none;
margin-right: 10rem;
margin-top: 1.5rem;
}
.navbar li {
display: inline-block;
}
.navbar li a {
margin: 0 1rem;
padding: .2rem .6rem;
color: black;
text-transform: uppercase;
border-bottom: 2px solid transparent;
transition: all .3s;
}
.navbar li a:hover {
border-bottom: 2px solid #E6AF2E;
transition: all .3s;
}
.navbar .nav-icon {
display: none;
transition: all .3s;
}
/* The sticky navbar */
.sticky {
position: fixed;
background-color: #3D348B;
top: 0;
width: 100%;
box-shadow: 0 .2rem .3rem rgba(0, 0, 0, .5);
}
.sticky .navbar-lists {
color: #E0E2DB;
}
.sticky .logo {
color: #E0E2DB;
}
/* Responsive navbar */
.responsive-navbar {
display: block;
text-align: right;
}
/* ------------------------------------- */
section {
padding: 8rem;
}
/* ------------------------------------- */
/* ------------------------------------- */
/* THE ABOUT SECTION */
/* ------------------------------------- */
.about-section {
padding: 0;
margin-top: 12rem;
}
.long-text {
width: 70%;
margin: 2.5rem auto 0;
}
.profile-image {
height: 35rem;
width: auto;
}
.my-info-img {
text-align: right;
padding-right: 15rem;
}
.my-info-list {
list-style: none;
}
.my-info-list>li {
margin-bottom: 1.2rem;
}
/* ------------------------------------- */
/* MEDIA QUERIES SECTION */
/* ------------------------------------- */
#media only screen and (max-width: 720px) {
html {
font-size: 50%;
}
.remove-heading {
display: none;
}
.logo img {
width: 5rem;
margin-top: 1rem;
}
/* Responsive navbar */
.navbar li {
display: none;
}
.navbar .nav-icon {
color: #000;
display: block;
font-size: 20px;
}
.sticky .navbar .nav-icon {
display: block;
color: #fff;
font-size: 20px;
}
.navbar .nav-icon:hover {
color: #2f2f2f;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Favicon link -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Icons link -->
<script src="https://kit.fontawesome.com/4e3ab997f9.js" crossorigin="anonymous"></script>
<!-- Rubik font link -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;300;400;700&display=swap" rel="stylesheet">
<!-- CSS links -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/queries.css">
<title>Arun Bohra - Design Business Solutions</title>
</head>
<body>
<header id="header">
<div class="hero-text-box u-text-align-center u-inline-block">
<h1><span class="remove-heading">Hello</span> I'm Arun</h1>
<h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
<h2 class="slogan u-margin-top-small">Design business solutions</h2>
Who am I
</div>
</header>
<div class="navigation">
<nav class="clearfix">
<div class="logo-box">
<a href="#header" class="logo">
<img src="img/logo.png" alt="logo">
</a>
</div>
<ul class="navbar">
<i class="fas fa-bars" id="responsive-nav-btn"></i>
<li>Home</li>
<li>About me</li>
<li>Skills</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="about-section" id="about">
<h2 class="u-text-align-center">Who am I</h2>
<p class="long-text u-text-align-center">I am a web designer and web developer. I design the webiste according to the needs of today's businesses. I do care a lot about the designs with a modern look and feel.</p>
<div class="row clearfix u-margin-top-big my-info-box">
<div class="span-1-of-2 my-info-img">
<img src="img/profile.png" alt="Profile image" class="profile-image">
</div>
<div class="span-1-of-2 my-info-text">
<h3 class="u-margin-bottom-medium">I design awesome websites</h3>
<ul class="my-info-list u-margin-bottom-medium">
<li><i class="fas fa-check-circle icon-small"></i>I can design awesome websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I can code the designed websites.</li>
<li><i class="fas fa-check-circle icon-small"></i>I deliver the work very fast.</li>
<li><i class="fas fa-check-circle icon-small"></i>I make very precise revisions.</li>
</ul>
Download CV
</div>
</div>
</section>
</body>
</html>

Clickable font-awesome icons in a clickable dropdown menu

I'm using two Fontawesome icons without any text for a clickable dropdown menu, but these icons won't toggle the dropdown menu. When I click on a padding around them, dropdown works. As you can see in the W3schools example, clicks on the text and padding are working, but not on the icon. How could I fix that?
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>

You can add .fa to your function
Code:
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn, .fa')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
Fiddle:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn, .fa')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>

May be like adding a new class for those elements we need to escape the close click:-
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() { document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.esc')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn esc" onclick="myFunction()" >Dropdown
<i class="fa fa-caret-down esc" ></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</body>
</html>

Dropdown button is not customizing

I have added a basic clickable dropdown button to my menu, but it can't be customize or even show the changes on the live website. And the dropdown content will not appear on separate line:
Here is a screenshot of what i am referring too:
https://imgur.com/hzKm7WI
I have searched google related to my problem, but everything I've searched is not working. Am I doing something wrong
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.button')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
margin: 0;
padding: 0;
margin-top: 130px;
overflow-x: hidden;
}
.nav-menu a img {
float: left;
margin-left: 10px;
}
.nav-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
margin-top: -130px;
}
.nav-menu li {
float: left;
}
.nav-menu li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-menu li a:hover,
.dropdown:hover .dropbtn {
border-top: 2px solid #ff0000;
}
.nav-menu li.dropdown {
display: inline-block;
}
.nav-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.nav-menu .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.nav-menu .dropdown-content a:hover {
background-color: #ff0000;
color: #fff;
}
.nav-menu .dropdown:hover .dropdown-content {
display: block;
}
.nav-menu li.social {
float: right;
}
li.navbar {
overflow: hidden;
background-color: transparent;
font-family: Arial, Helvetica, sans-serif;
float: right;
padding-right: 100px;
}
li.navbar a {
float: left;
font-size: 16px;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown-menu {
float: left;
overflow: hidden;
}
.dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
li.navbar a:hover,
.dropdown-menu:hover .button,
.button:focus {
background-color: red;
}
.dropdown-menu-content {
color: #fff;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-menu-content a {
float: left;
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Title Here</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="CSS/style.css?v=12345">
</head>
<body>
<div class="nav-menu">
<ul>
<img src="img/logo.jpg" style="width:50px">
<li class="dropdown">
Games
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="dropdown">
Crews
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Jobs</li>
<li>Photos</li>
<li>Videos</li>
<li>Events</li>
<li>News</li>
<li class="navbar">
<div class="dropdown-menu">
<button class="button" onclick="myFunction()">
<i class="fas fa-user"></i>
</button>
<div class="dropdown-menu-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
<li class="social">
Sign In
Sign Up
<i class="fas fa-search"></i>
</li>
</div>
</li>
</ul>

Have you tried writing css with more specificity like
.navbar-nav .open .dropdown-menu .button {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
However if what you meant was it gets applied locally and not when deployed on to live site it could be due to css caching by browser in which case you can use a cache busting strategy like appending a query string(unique) at the end of url when linking the css eg
<link rel="stylesheet" type="text/css" href="./path/to/cssfile.css?v=12345">.

i've tried your code & there should be no problem.
I think its because your style was overridden by another class. You can check it with browser inspector.
In that case you should prioritize yous css by using !important like this
.dropdown-menu-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block !important;
text-align: left;
}
you can find more info about css specificity here
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Can't figure out how to make search bar like the navbar. Also search element is not working with CSS

I put the navbar above the header if that affects anything.
How it currently looks like:
Can't figure out how to make search bar like the navbar. Also, the search element is not working with CSS. If anyone can help that would be amazing! I'm lost. I am trying to make the search bar and the navbar looks like the rest of the tab buttons and elements. Same height as the other elements.
HTML
<div class="navbar">
<a class="active" href="#home">Home</a>
<a herf="#about">About </a>
<a herf="#patientinfo"> Patient Information </a>
<div class="dropdown">
<button class = "dropbutton">Select Hospital
</button>
<div class= "dropdown-content">
Hospital
Hospital
Hospital
Hospital
</div>
</div>
<div class ="search">
<form action="/action_page.php"> <!--backend -->
<input type="text" name="search" placeholder="Search">
<button type="submit">Submit</button>
</form>
<!--search bar -->
</div>
</div>
CSS
.navbar {
overflow: hidden;
background-color: black;
font-family: 'Roboto';
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a.active{ /*shows active tab */
background-color:red;
color:white;
}
.navbar input[type=text] {
background-color: inherit;
color: white;
width: 25%;
float: left;
padding: inherit;
font-size: 16px;
}
}
.navbar .search button {
float: left;
padding: inherit;
margin:0;
margin-top:0px;
background-color: inherit;
font-size:15px;
cursor:pointer;
border:none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content { /* WHEN U HOVER OVER IT SHOWS THE MENU
*/
display: block;
}

This is how I would handle this. But note that you will have to do some responsive styles. I put in a fail safe so you dont have bad overlapping. Note that it looks alittle off on the code snippet because its so small, you should check it out by pasting it in a fresh html file.
.navbar {
overflow: hidden;
background-color: black;
font-family: 'Roboto';
width: 100%;
position: relative;
height: 47px;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a.active{ /*shows active tab */
background-color:red;
color:white;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content { /* WHEN U HOVER OVER IT SHOWS THE MENU
*/
display: block;
}
.search {
position: absolute;
bottom: 0px;
right: 0px;
}
.search-input {
height: 47px;
border: none;
background-color: inherit;
color: white;
font-size: 16px;
}
.search-input:active {
background-color: red;
}
.search-input:focus {
background-color: red;
}
.search-button {
padding: 16px 10px;
height: 47px;
border: none;
color: white;
background-color: black;
font-size: 16px;
cursor:pointer;
}
.nav-links {
padding-right: 280px;
height: 47px;
}
<div class="navbar">
<div class="nav-links">
<a class="active" href="#home">Home</a>
<a herf="#about">About </a>
<a herf="#patientinfo"> Patient Information </a>
<div class="dropdown">
<button class = "dropbutton">Select Hospital
</button>
<div class= "dropdown-content">
Hospital
Hospital
Hospital
Hospital
</div>
</div>
</div>
<div class="search">
<form action="/action_page.php"> <!--backend -->
<input class="search-input" type="text" name="search" placeholder="Search">
<button class="search-button" type="submit">Submit</button>
</form>
<!--search bar -->
</div>
</div>

Footer Does Not Fixed at The Below of Page

Here, I would like to fix my footer at the below of the page. I cannot seem to do it for this page whereas the css codes for footer works well on the other pages. Again, I would like to place the footer fixed at the below of the page.
Need help on this.
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();
body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
#media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
#media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
<ul>
<li>Home</li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
Conduct Study
Reports
</div>
</li>
<li>Contact</li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>

See the snippet below. This will force the footer to be on the bottom of the page only if the content isn't high enough.
See the answer of Staale # How do you get the footer to stay at the bottom of a Web page?
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();
/* --- This below --- */
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -62px;
/* the bottom margin is the negative value of the footer's height */
}
.push {
height: 62px;
/* .push must be the same height as .footer */
}
/* --- This ahead --- */
body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
#media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
#media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
<div class="wrapper"> <!-- START: Wrap everything in this div -->
<ul>
<li>Home</li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
Conduct Study
Reports
</div>
</li>
<li>Contact</li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div class="push"></div> <!-- START & END: Push div -->
</div> <!-- END: Wrap everything in this div -->
<div class="footer"> <!-- START: Footer WITH class -->
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div> <!-- END: Footer WITH class -->

Please use following css to make footer stick at bottom:
footer {
/*it will allow to scroll page while staying at top incase page is long*/
position: fixed;
bottom: 0;
width: 100%;
}
JSFIDDLE
Additionally if you don't want this behavior you do this to make footer stick at bottom always.
footer {
position: absolute;
bottom: 0;
width: 100%;
}

Develop Reference

JavaScript is the programming language of the Web.

Responsive CSS Topnav with dropdown not working on samll screens - javascript

Related

Anchor tag attribute

Clickable font-awesome icons in a clickable dropdown menu

Dropdown button is not customizing

Can't figure out how to make search bar like the navbar. Also search element is not working with CSS

Footer Does Not Fixed at The Below of Page

Categories

Resources