I have made a nav bar with a search form, a few links, and a link that has a dropdown to more links.
However, I can't seem to find a way to get everything on the same line of the navbar.
Here is the output right now: My HTML Page
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<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">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
About
Contact
<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 class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</body>
</html>
As you can see the dropdown menu is out of order with the other links. Is there any way to align the 'dropdown' link with the other links with the dropdown links inside the dropdown tab until you hover over it? I have been stuck on this all day so any ideas or suggestions would help.
Below example align the dropdown button and search bar:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<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="topnav">
<a class="active" href="#home">Home</a>
About
Contact
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="dropdown" style="padding: 14px 16px;">
<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 did not give any styling to the drop-down part, that's the reason it was not aligned.
Here I have made some changes to HTML part and added the required CSS. Hope This Helps.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
/* dropdown part CSS*/
.dropdown {
float: left;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
}
.dropdown:hover .dropbtn {
background-color: Blue;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<head>
<title></title>
<meta charset="utf-8">
<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="topnav">
<a class="active" href="#home">Home</a>
About
Contact
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</body>
Related
I am trying to create a dropdown menu from "about us" but there seems to be some color unabling to give a proper dropdown. On the navigation bar there's a block of red color next to the "Home" button. Also when i hover on the "About us" button there are again red color visible therefore not aligning the dropdown menu links. Can someone explains how to remove the additional color? Here's my code:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<br>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: TIMES ROMAN;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #330000;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
<body style="background-color:#C0C0C0">
<div class="topnav">
<img src="D1.jpg" height="70" width="120" align="left"><br>
Home
<div class="dropdown">
<button class="dropbtn"><a class="active">About us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
</div>
<div class="row">
<div class="column">
Who are we?
What do we do
Project aims/goals
History
</div>
</div>
</div>
</div>
Contact ✆
Gallery 📸
Our services
Policy
Sign Up
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</body>
</html>
The way you code your css is different then how you have the html structure.
<a class="active"><button class="dropbtn">About us <i class="fa fa-caret-down"></i></button></a>
Check the above line and replace it in your code.
Wrap your button element inside a (anchor) tag.
<-- somewhere in the CSS, lies the error that is being made regarding my Nav bar. It's possible it could be in the HTML or both. For whatever the reason, the Calendars, Contact and Search bar got moved out of place. I have checked everywhere in this code and cannot find the error. Perhaps someone more experienced than I am can help me locate the issue inside of the CSS and or HTML -->
/*nav bar*/
.navbar input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
.navbar .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.navbar .search-container {
float: none;
}
.navbar a, .navbar input[type=text], .navbar .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.navbar input[type=text] {
border: 1px solid #ccc;
}
}
.navbar {
list-style:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbaritems {
float: left;
display: inline;
color: white;
text-align: center;
padding: 8px 16px;
text-decoration: none;
}
h1 {
text-align: center;
}
/*a link style*/
a:link {
color: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: whitesmoke;
background-color: transparent;
text-decoration: none;
}
a:active {
color: white;
background-color: transparent;
text-decoration: none;
}
/* Calendar Dropdown Menu */
li.dropdown {
display: inline-block;
}
.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 {
color: black;
padding: 12px 20px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!-- this section the HTML code for the website. The dropdown, searchbar and contact portions of the code I believe are causing issue -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header>
<h1>News</h1>
<nav>
<ul class=navbar>
<li class="navbaritems">Home</li>
<li class="navbaritems">Page 2</li>
<li class="navbaritems">Page 3</li>
<li class="navbaritems">Page 4</li>
<div class="navbaritems" class="dropdown">
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Dropdown Page 1
Dropdown Page 2
Dropdown Page 3
</div>
</li>
<li class=navbaritems>Contact</li>
<input type="text" class=searchbar placeholder="Search.." name="Search" name="searchbar">
<!-- Fix the button for the search bar https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_searchbar3 <button type="submit" class=search-container><i class="fa fa-search"></i></button>-->
</ul>
</nav>
</header>
<main>
<!--Article Feed Goes Here-->
<!--Need to add Advertising mechanism to this section of the website-->
</main>
<footer>
<!--Put "Terms of Service" and "Privacy Policy" here-->
</footer>
</body>
</html>
I'm trying to make a navigation bar with one category being a different color (blue) than the others (green). When you hover off of this blue HOME category, it needs to turn green. The category that is hovered over should turn blue, then return to green when not hovered over. Here are some pictures for reference:
Default/Home state: User starts on the Home page. The Home category is blue to show the user where they are.
Employer state: User has navigated to the Employer Page. The Home category is now green.
I am working in SFMC, so I have to include all HTML, CSS, and Javascript in one collection. Here is the code that I have:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
.body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #47a23f;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #005da6;
}
.topnav a.active {
background-color: #005da6;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #47a23f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #fff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #003150;
color: #fff;
}
.dropdown:hover .dropdown-content {
display: block;
color: #fff;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<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">
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Workforce
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a target="blank" href="https://myactivehealth.com/Portal/PreRegistrations/Index">Request to enroll</a>
<a target="blank" href="https://www.myactivehealth.com/Portal/Registration/RegistrationStep1?IsoAuthDPRequest=False">Create an account</a>
<a target="blank" href="https://www.myactivehealth.com/Portal/PortalLogin.aspx?SupplierURL=15571">Log in</a>
</div>
</div>
Employer
<div class="dropdown">
<button class="dropbtn">Injured Workers
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a target="blank" href="https://www.myactivehealth.com/Portal/Registration/RegistrationStep1?IsoAuthDPRequest=False">Create an account</a>
<a target="blank" href="https://www.myactivehealth.com/Portal/PortalLogin.aspx?SupplierURL=15571">Log in</a>
</div>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
If what you want is to make active elements turn back to their normal color when hovering over other elements all you have to do is to add this at the bottom of your CSS:
.topnav > .active {
background-color: #005da6;
}
.topnav:hover > .active {
background-color: inherit;
}
.topnav > .active:hover {
background-color: #005da6;
}
.dropdown-content > .active {
background-color: #003150;
}
.dropdown-content:hover > .active {
background-color: inherit;
}
.dropdown-content > .active:hover {
background-color: #003150;
}
If you just want some ideas for active elements handling, take a look to the following simplified snippet:
(NOTE: Below navigation bar works with pure HTML and CSS (No JS). JS is being used only to change the active elements automatically when the browser URL changes.)
// * THIS IS ONLY A DEMONSTRATIVE EXAMPLE *
const links = Array.from(document.querySelectorAll('.topnav a'));
const addActive = (elem) => {
let current = elem;
while (current && !current.classList.contains('topnav')) {
if (current.classList.contains('dropdown')) {
current.classList.add('active');
break;
}
current = current.parentElement;
}
elem.classList.add('active');
};
const handler = (e) => {
const previousA = document.querySelector('.topnav .active');
const previousB = document.querySelector('.dropdown-content .active');
if (previousA) {
previousA.classList.remove('active');
}
if (previousB) {
previousB.classList.remove('active');
}
const next = links.find((link) => location.href === link.href) || links[0];
if (next) {
addActive(next);
}
};
window.addEventListener('popstate', handler);
document.addEventListener('DOMContentLoaded', handler);
.body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #47a23f;
}
.topnav a {
float: left;
font-size: 16px;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #ffffff;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #ffffff;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #005da6;
}
.topnav .icon {
display: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #47a23f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #003150;
color: #ffffff;
}
.dropdown:hover .dropdown-content {
display: block;
color: #ffffff;
}
.topnav > .active {
background-color: #005da6;
}
.topnav:hover > .active {
background-color: inherit;
}
.topnav > .active:hover {
background-color: #005da6;
}
.dropdown-content > .active {
background-color: #003150;
}
.dropdown-content:hover > .active {
background-color: inherit;
}
.dropdown-content > .active:hover {
background-color: #003150;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
Home
<div class="dropdown">
<button class="dropbtn">Workforce
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Request to enroll
Create an account
Log in
</div>
</div>
Employer
<div class="dropdown">
<button class="dropbtn">Injured Workers
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Create an account
Log in
</div>
</div>
</div>
So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?
function myFunction() {
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
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 {
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;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script
Edited CSS and HTML:
function removeListItem(ev) {
const EL_list = ev.currentTarget.closest("li")
EL_list.remove();
}
const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }
html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}
#navbar {
background-color: #333;
position: sticky;
display: flex;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#navbar>a {
display: block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar .home {
background-color: green;
}
.dropdown .dropbtn {
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 {
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-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
display: flex;
}
.dropdown-list li a {
padding: 14px 16px;
flex: 1;
}
.dropdown-list li:hover a {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#main-container {
padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
Google
<button class='deleteBtn'>X</button>
</li>
<li>
Youtube
<button class='deleteBtn'>X</button>
</li>
<li>
Amazon
<button class='deleteBtn'>X</button>
</li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
use preventDefault().
Read More about preventDefault
function myFunction(e) {
e.preventDefault();
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
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 {
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;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
I have a webpage that works fine on web browser, but when I visit the webpage on my phone and scroll my thumb up, I see white content where it shouldn't be.
This is the webpage before touching it:
1
This is webpage when I press the background and move my thumb up:
As you can see on the second image, at the bottom of the page, there is a white space between the footer and background image.
Here is the css:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
background-image: url('then.jpg');
min-height: 100%;
}
display: block;
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
.form {
margin: 0 auto;
margin-top: 40px;
width:350px;
height:35%;
font-family: Impact, Charcoal, sans-serif;
border: 1px solid;
box-shadow:5px 10px;
border: 1px solid #ccc;
background-color: white;
overflow: hidden;
display: block;
text-align: center;
}
#yourinfo{
font-size: 35px;
}
#nextBttn {
width:135px;
height:25px;
}
.topnav {
overflow: hidden;
background-color: black;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
filter: none;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
bottom: 0;
width: 100%;
overflow: hidden;
margin-bottom: 0;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
#media screen and (max-width: 600px) {
.form a:not(:first-child) {display: none;}
.form a.icon {
float: right;
}
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Here is the HTML:
<body >
<div class="background-image"></div>
<div class="topnav" id="myTopnav">
Home
Contact
About Us
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="form">
<form name="firstForm"method="post" id="form1" action="http://localhost:8080/connect.php">
<header id="yourinfo"><b>Your information</b></header><br><br><br>
<label id="nameLabel">Name:</label><br>
<input id="nameInput"type="text"><br><br>
<label id="ageLabel">Age:</label><br>
<input id="ageInput"type="text" width="55%"><br><br>
<label id="emailLabel">Email Address:</label><br>
<input id="emailInput" type = "text"><br><br>
<label id="phoneLabel">Phone:</label><br>
<input id="phoneInput" type="text"><br><br>
<br>
<input id="nextBttn" type="submit" value="Next">
<br>
<br>
</form>
</div>
<div class="navbar">
Contact us
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
Change your CSS for the body to include background-attachment:fixed;, which should keep the background from scrolling.
body {
margin: 0;
background-image: url('then.jpg');
background-attachment:fixed;
min-height: 100%;
}