I am working on front-end. I have done a drop-down. That's working fine in other pages. But in only one page it is overlapping nav-bar.
body{
margin:0;
}
.navbar {
overflow: hidden;
background-color: #1e436b;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar h4 .logo{
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
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: #ffd400;
color:black;
}
.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;
color:#000;
}
.dropdown:hover .dropdown-content {
display: block;
margin-top:4%;
}
#imgId {
-webkit-box-shadow: 0 0 18px 18px #1e436b inset;
-moz-box-shadow: 0 0 18px 18px #1e436b inset;
box-shadow: 0 0 18px 18px #1e436b inset;
}
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>header</title>
<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">
<link rel="stylesheet" href="./CSS/header.css">
</head>
<body>
<div class="navbar">
Login
Team
Projects
<div class="dropdown">
<a href="process.obj" class="dropbtn">Process
<i class="fa fa-caret-down"></i>
</a>
<div href="project.obj" class="dropdown-content">
<a>New Joiner Process</a>
<a>Management Process</a>
</div>
</div>
Home
<div id="imgId">
<img src="./images/logo1.png" class="logo" style="padding:0px;" width="80px" height="50px">
</div>
</div>
</body>
</html>
Anyone having any idea about this issue. What is the behind screen process of this issue?
I am working on this for a week. But I'm not getting it. Beginner here.
body{
margin:0;
}
.navbar {
overflow: hidden;
background-color: #1e436b;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar h4 .logo{
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
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: #ffd400;
color:black;
}
.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;
top: 25px;
}
.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;
color:#000;
}
.dropdown:hover .dropdown-content {
display: block;
margin-top:4%;
}
#imgId {
-webkit-box-shadow: 0 0 18px 18px #1e436b inset;
-moz-box-shadow: 0 0 18px 18px #1e436b inset;
box-shadow: 0 0 18px 18px #1e436b inset;
}
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>header</title>
<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">
<link rel="stylesheet" href="./CSS/header.css">
</head>
<body>
<div class="navbar">
Login
Team
Projects
<div class="dropdown">
<a href="process.obj" class="dropbtn">Process
<i class="fa fa-caret-down"></i>
</a>
<div href="project.obj" class="dropdown-content">
<a>New Joiner Process</a>
<a>Management Process</a>
</div>
</div>
Home
<div id="imgId">
<img src="./images/logo1.png" class="logo" style="padding:0px;" width="80px" height="50px">
</div>
</div>
</body>
</html>
Extremely simple. Add a top: 25px; to your css.
Related
I want to make a online card game with html/css/js and i want to make a place that shows all your cards but i want them to be inline and inline-block because i need to give it a custom width and height but when i do that it doesnt work
heres the code :
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: inline-block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: inline;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
if you run the snippet its not horizontal
please help me i need help fast
Instead of making it inline u should make it display: flex
edit: to make cards go to next line use flex-wrap: wrap
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: flex;
flex-wrap: wrap;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc
Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. I tried some edits but isn´t do with dropdown. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!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">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.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 {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
tyle>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
add hover css to display the drop-down content
.dropbtn:hover ~ .dropdown-content {display: block;}
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>
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