I have following code for responsive navigation bar. Right now all the menu times hide for small screen except Home button.
I need to keep Search menu also for the small screen. How can I do this in below 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">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.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;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:nth-child(1)) {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;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a >Home</a>
<a >News</a>
<a >Contact</a>
<a>About</a>
<a ><i class="fa fa-search"></i>Search</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
I tried by adding .topnav a:not(:nth-child(5)) {display: none;} with the existing css but not working. I already found select multiple child select multiple child in css, but no idea how to apply here .
Try this instead..
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: #333;
}
.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;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.topnav a:nth-child(2){display:none;}
#media screen and (max-width: 600px) {
.topnav a{display: none;}
.topnav a:first-child,.topnav a:nth-child(2){display: block;}
.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 a:nth-child(6){display:none;}
}
<!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="topnav" id="myTopnav">
<a >Home</a>
<a><i class="fa fa-search"></i>Search</a>
<a >News</a>
<a >Contact</a>
<a>About</a>
<a><i class="fa fa-search"></i>Search</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>
Related
<!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>
.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: 12px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
}
#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: center;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: center;
}}
body {
margin: 0;
font-family: raleway;
}
</style>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- NAVIGATION -->
<div class="topnav" id="myTopnav">
<!-- logo -->
<!-- links -->
HOME
OUR MISSION
OUR SERVICES
BLOG
CONTACT US
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</html>
The mobile navigation list is sort of centered, but it steps to the left under the logo. How can this be centered below the logo? Thanks in advance. I have been working on this for over a week now and have not got any closer. The 'flex' opton did not work on my google chrome. My skills are not that good as I am only learning.
logo?
I have several pages with the following configuration:
a background-image(centered) and vertical menu (button) in a div.
=> https://ibb.co/3Cmf0dt
The div-menu, will be placed on the right but depending on a page to another, once centered, once a little higher.
I would like to have your help for the CSS of the div-menu.
How is it positioned so that it is reduced (with the buttons) and always remains in the same place compared to the background image ?
Here is my code(but button don't reduce and div possition refer to page and not image-background):
=> https://ibb.co/9cQL1yD
THANKS IN ADVANCE !!
Open this in a tab then resize your window.
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: #333;
}
.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;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#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;
}
}
<!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="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">×</i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>
Here's the link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav
When my site goes to a smaller sign the menu goes to two parts a "home" button and a burger button for the rest of the menu. All works but when I click the menu it moves a little but it is very annoying. I searched and found one post with the same question but the buildup was completely different and not suitable for my needs.
I hope someone can help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-t0-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="title.css">
<link rel="stylesheet" href="menu.css">
<title></title>
</head>
<!-- title of the website with link -->
<a href="error404.html">
<div class="title">B</div>
</a>
<!-- vertical navigation menu -->
<body>
<div class="topnav" id="myTopnav">
Home
News
Shop
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<br>
<br>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
menu.css
.topnav {
width: 100%;
overflow: auto;
}
.topnav a {
margin-top: 5px;
text-align: center;
text-decoration: none;
float: left;
position: relative;
border: 0;
padding: 14px 16px;
font-size: 17px;
font-family: "Century Gothic";
color: black;
width: 20%;
}
.topnav a:hover {
background-color: black;
color: white;
}
.topnav a.active {
background-color: red;
color: black;
}
.topnav .icon {
display: none;
}
.icon {
margin: 1em;
width: 3px;
}
.icon:after,
.icon:before,
.icon div {
background-color: red;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
.icon:hover:before {
transform: translateY(12px) rotate(135deg);
}
.icon:hover:after {
transform: translateY(-12px) rotate(-135deg);
}
.icon:hover div {
transform: scale(0);
}
#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 a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
}
}
I'm trying to add a slide-down transition when the menu is 'opened' but i just can't get my head wrapped around it. Tried numerous things but can't get the transition to work.
I tried adding it to some of the classes with no result.
I read something about display blocking the transition and should be replaced with visibility. That results in two line's with the backgroundcolor and the dropdown button disapearing.
Hope someone can shed some light on this.
HTML:
<div class="topnav" id="myTopnav">
Home
Steppen
Walks
Events
Agenda
Wie zijn wij?
Tips
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
CSS:
.topnav {
background-color: #3b3b3b;
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #5bdeff;
text-align: center;
padding: 1% 2%;
text-decoration: none;
font-size: 22px;
}
.topnav a:hover {
background-color: #5bdeff;
color: black;
}
.topnav a.active {
background-color: #5bdeff;
color: black;
}
.topnav .icon {
display: none;
}
.topnav a:active {
position: relative;
top: 1px;
}
.responsive.fa-bars {
color:#000
}
#media (max-width: 900px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media (max-width: 900px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Whenever I click on anything in my NavBar it puts a dotted outline around it. Stylistically I do not like it very much, I read it serves an accessibility purpose but I would like to view my page without it first.
Most of the answers I have found online say it occurs in the .active function, but I'm wondering if there's a way to remove the outline without manually assigning each menu item class="active". Also, the menu bars icon has a dotted outline around it each time it is clicked until you click elsewhere and I'd like to get rid of that as well.
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: #333;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.topnav a {
display: inline-flex;
color: #fff;
text-align: justify;
text-decoration: none;
font-size: 15px;
font-weight: lighter;
transition : 0.3s;
padding: 0;
margin: 5px 60px 5px 60px;
list-style-type: none;
}
.topnav a:hover {
color: #4286f4;
}
.active, .active:focus {
background-color: #333;
color: #4286f4;
outline: none;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 800px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: left;
display: flex;
position: absolute;
left: 0;
top: 9px;
}
.topnav{
flex-direction: column;
transition : 0.3s;
}
}
#media screen and (max-width: 800px) {
.topnav.responsive {position: static}
.topnav.responsive .icon {
position: absolute;
left: 0;
top: 0px;
}
.topnav.responsive a {
float: left;
display: inline;
text-align: center;
line-height: 50px;
}
}
<!DOCTYPE html>
<!-- Begin HTML-->
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Begin head-->
<head>
<title>Website</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<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" id="myTopnav">
<img src="Images/PlaceholderLogo.png"width="30" height="30">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>
You don't need to add a .active class to each element to achieve this, you can use pseudoclasses such as :active, :hover, :focus, etc. These are states of the element.
You would have to do something like this:
.topnav a:active, .topnav a:visited {
outline: none !important;
}