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
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 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 made a responsive nav that works perfectly except for one annoying little thing: When I resize the screen width to 1200px or below, the menu items are supposed to disappear and get replaced with a hamburger icon that displays all those disappeared items vertically when clicked. While most of the links do as expected, the first link (Home) plops itself next to the image instead of the next line.
I plan on changing the 1200px to something more like 800px for phones, but made it 1200 to work on it without having to resize the screen so much while on comp.
I tried making the image inside an tag, but it messed with the padding and I don't want it to be clickable.
Is there a simple fix for this? Making the image have display:block didn't seem to fix it.
My 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>
#import url('https://fonts.googleapis.com/css?family=Montserrat:500');
body {
margin: 0;
background-color: #393f4d;
background-image: linear-gradient(90deg, #323d46 0%, #393f4d 3% 97%, #323d46 100%);
font-family: Montserrat, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #1d1e22;
background-image: linear-gradient(105deg, #131417 0%, #1d1e22 5% 95%, #131417 100%);
padding: 15px 0px;
}
.topnav a {
float: left;
display: inline-block;
color: #feda6a;
transition: all 0.3s ease 0s;
text-align: center;
padding: 15px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: #c82850;
}
.topnav a.active {
color: #c85870;
}
.logo {
float: left;
display: block;
padding: 0px 16px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 1200px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 1200px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0px;
top: 15px;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQLQXYINuBRI13H7QE7ChnfwxQ50PY76Vs_KA&usqp=CAU" alt="Penguin" style="width:48px; height:48px;">
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>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
You have float: left set on your .logo image, even when your screen width is below 1200px. This is why display: block was not working. Simply set float: none in a media query:
#media screen and (max-width: 1200px) {
.logo {
float: none;
display: block;
}
}
I'm working on a website for a school project, i took this format from w3schools and I need to adjust it a bit:
<!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: #4CAF50;
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
More Links
</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>
i tried to have sub-sub tabs, means that another menu will continue from "More links".
i tried to do some stuff but failed.
and how do i keep the top menu always in place (even after i go to a different link)?
Here's a really basic example that could be improved. There are LOTS of ways to do this. Just a couple of basic functions on mouse enter of the required elements, and changing the CSS classes to keep the sub nav visible on screen if the mouse is over it.
https://codepen.io/cove/pen/VwLdLKr
The javascript:
var dropdown_sub_nav = document.getElementById('dropdown-sub-nav');
var sub_links_1 = document.getElementById('sub-links-1');
dropdown_sub_nav.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
});
dropdown_sub_nav.addEventListener('mouseout', (event) => {
sub_links_1.setAttribute('class', 'sub-links');
});
sub_links_1.addEventListener('mouseenter', (event) => {
sub_links_1.setAttribute('class', 'dropdown-content sub-links sub-links-active');
})
I would ask you how you are going to make this type of navigation truly responsive, as these kinds of hover states aren't user friendly on mobile devices. Will you hide this nav, and show a mobile friendly one?
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;
}