I have created the menu which works fine with all the links and responsiveness but there is some issue.
Example:
When I click on about us the menu get disappear but link is working fine the only issue is my menu disappear from the page. I want my menu to be there like fixed. Can anyone help me to figure out the issue.
<!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">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #ea8537;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
About Us
Contact Us
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Google
Gmail
</div>
</div>
Disclaimer
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
.navbar { /* navbar = your "topnav" */
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
reference:https://www.w3schools.com/howto/howto_css_fixed_menu.asp
Related
This is coming from the W3Schools Code. I am having an issue regarding the drop-down menu function where it disappears or does not show whenever I clicked the toggle icon. Whenever I clicked the toggle icon, I would always go up to see the tabs.
Source: https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
Here is the code:
HTML
<!-- Responsive Top Navbar -->
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a class="topnav-right" href="#">Sign Up</a>
<a class="topnav-right" href="#">Sign In</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
CSS
/* Navbar Top */
body {
margin:0;
font-family:Arial
}
.topnav {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
1) Firstly, you need to include javascript.
and wrap the javascript inside the "script" as below :
`<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
}
else {
x.className = "topnav";
}
}
</script>
`
2) Second, add before inside `<head>` this external library :
`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> `
3) Add some longer content to see if the toggle menu work well after scrolling down.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* 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: #04AA6D;
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;
}
}
<div class="topnav" id="myTopnav">
Home
News
Contact
<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>
About
☰
</div>
<!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">
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
<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 class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Bing
Yahoo
Google
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
This is a responsive dropdown menu of W3 Schools. The problem is that when I click on dropdown1 and then click on dropdown2 to open the submenu, automatically the third link of dropdown2 is clicked. This is creating a bad user experience.
Also, I want that when the user clicks on dropdown1 to open the submenu then the user will be able to close dropdown1 when clicking on it again.
I am using an example of a responsive menu from w3c schools. This has single links and drop down links. I wished to replicate the drop section so have added a new section labelled dropdown 1. However when testing this setup on a mobile device it always randomly opens links from dropdown1 menu. Is this a bug or am I using the wrong approach for multi dropdown menus.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="topnav" id="myTopnav">
Home
News
x
<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>
Contact
<div class="dropdown">
<button class="dropbtn">Dropdown 1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
About
☰
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav with Dropdown</h2>
<p>Resize the browser window to see how it works.</p>
<p>Hover over the dropdown button to open the dropdown menu.</p>
</div>
</body>
I am using CSS to make drop-down menu. When I resized the page, the drop-down menu didn't work. It didn't do anything when I click on the menu. Also I would like to know that when I resize my page, the About menu from the nav bar does not show after resizing. I do not know how to fix the size when I resize the page.
This is my first time using CSS and HTML. I would love to learn from you guys here.
This is my HTML code
<head>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link href="css/pj2.css" rel="stylesheet" type"text/css">
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset= "UTF-8">
<title>KeeNok</title>
</head>
<body>
<div class="wrap">
<!--Responsive menu-->
<div class="topnav" id="myTopnav">
Home
<div class="dropdown">
<button class="dropbtn">Events
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Past Events
Future Events
</div>
</div>
About
☰
</div>
<!--Menu-->
<div id="main_menu">
<div class="logo_area">
<img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\graphics\KeeNokLogo.jpg" alt="logo">
</div>
<div class="inner_main_menu">
<ul id="menu">
<li>Events
<ul>
<li>Past Events</li>
<li>Future Events</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
<!--Popup Photos-->
<div class="thumbs">
<div id="Mian Kham" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Mian Kham.png" alt="Mian Kham"></div>
<div id="Gai Tod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Gai Tod.png" alt="Gai Tod"></div>
<div id="Tom Khao Pod" href="#"><img src="C:\Users\John\Documents\Other\Cooking\Kee Nok\Photos\1\Tom Khao Pod.png" alt="Tom Khao Pod"></div>
</div>
<footer></footer>
</div>
</body
This is my CSS code
body {
margin: auto;
background: rgba(255, 255, 255, 0.945);
font-family: 'Ubuntu', sans-serif;
overflow: auto;
height:100%;
}
.wrap {
position: fixed;
top: 0;
left: 0;
border: 20px solid #9fd7fd;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.inner_main_menu {
margin: 0 auto;
width: 1300px;
}
.inner_main_menu ul{
margin: 60px;
padding: 0;
list-style: none;
text-align: right;
padding-top: 30px;
z-index: 1;
}
.inner_main_menu ul li{
float: none;
display: inline-block;
position: relative;
}
.inner_main_menu ul li:nth-child(1){
float: left;
}
.inner_main_menu ul li a {
color: #262626;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding: 10px 20px;
}
.inner_main_menu ul li a:hover {
color: #eb3332;
}
.inner_main_menu ul li ul {
position: absolute;
top: 40px;
left: 0;
width: 200px;
padding: 0;
display: none;
margin: 0;
}
.inner_main_menu ul li:hover ul {
display: block;
}
.inner_main_menu ul li ul li{
float: left;
}
.inner_main_menu ul li ul li a{
font-size: 15px;
}
#main_menu {
width: 100%;
position: relative;
}
.logo_area img{
max-width: 300px;
position: absolute;
left: 50%;
top: 0;
content: " ";
margin-left: -150px;
text-align: center;
}
#main_menu:after {
content: "";
display: table;
clear: both;
}
.thumbs {
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.thumbs img{
max-width: 300px;
}
.topnav {
background-color:#555d61;
overflow: hidden;
}
.topnav a {
float:left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.active {
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
padding: 14px 16px;
}
.dropdown-content {
display: none;
position: absolute;
background-color:#555d61;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropbtn {
background-color: #aaadad;
color: black;
}
.dropdown-content a:hover {
background-color: #aaadad;
color: black;
}
.dropdown:hover .dropdown-content {
display:block;
}
#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;
}
}
This is how my page look like before resizing
This is my page looks like after resizing
I see in your CSS that there's a comment which reads:
The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon
I think you are missing the JavaScript you need to add the class to your navigation.
It will look something like this:
const icon = document.querySelector(".icon")
const nav = document.querySelector(".topnav")
icon.onclick = function() {
nav.classList.toggle('responsive');
}
I have to put a respnsive menu with submenus.
I found this lesson : https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
The menu itself comes out, but when I click the "Dropdown" button, the submenus are not displayed at all.I tried to change some code but nothing get.
How can I fix this or where to look for the problem?
Thanks in advance!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
#navbaronder {
background-color: #dddddd;
margin: 155px 0px 0px 0px; /* viso4ina na drop down menuto*/
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 500;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
<div id="navbaronder">
<div class="topnav" id="myTopnav">
Home
News
Contact
<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>
About
☰
</div>
</div>