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;
}
}
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 wanted to create a navigation menu, but last item after zooming out, for example at 90% zoom goes down. "Five" is located under "Four" item. Navigation should be static in size and span one line, not two. All items should occupy the entire size of the div#page (960px, 192px*5) in one bar.
body {
background-color: blue;
margin: 0;
}
.wrapper {
width: 960px;
margin: 20px auto 0 auto;
}
#page {
background-color: #777272;
width: 100%;
height: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
}
nav ul li a {
text-decoration: none;
display: block;
background-color: purple;
width: 170px;
height: 20px;
line-height: 20px;
padding: 10px;
border: 1px solid black;
text-align: center;
margin: 5px 0px 20px 0;
}
a:visited {
color: white;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="page">
<nav>
<ul>
<li>One "1" One</li>
<li>Two "2" Two</li>
<li>Three "3" Three</li>
<li>Four "4" Four</li>
<li>Five "5" Five</li>
</ul>
</nav>
<ul class="clear">
<li>Tomato</li>
<li>Cucumber</li>
<li>Carrot</li>
</ul>
</div>
</div>
</body>
</html>
Simply remove this style:
nav ul li {
float: left;
} // not needed
and add this style:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; // this has been added
}
JSFiddle:
https://jsfiddle.net/1c2gsn34/
EDIT: In 33% UI is breaking, due to width:170px. Please remove the width from a instead of width use
nav ul li {
flex: 1;
}
Here you go this is what you want.
<!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: #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: 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">
Home
News
Contact
About
<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>
Source : W3school
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>
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
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;
}