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;
}
}
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 a responsive menu that on large screens you see the drop-down menu centered on the page. But on small screens you see a hamburger menu also centered on the page, and I want the icon to be seen on the left. How can i do that? It looks like this: https://postimg.cc/dLFkHH1Z
On large screens there is no problem but in small screens i want to see the hamburguer icon on the left.
Thanks in advance.
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
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: white;
overflow: hidden;
display:flex;
justify-content: center;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
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, .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;
}
}
<html>
<head>
<title>Menú Desplegable Responsive</title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="menu.js" type="text/javascript"></script>
</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>
About
☰
</div>
</body>
</html>
i have found the solution.
document.getElementById("menuBars").onclick = function(e) {
e.preventDefault();
var x = document.getElementById("myTopnav");
x.classList.toggle("responsive");
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: white;
text-align: center;
}
/*
.topnav .fl {
float: left;
}
.topnav .fr {
float: right;
}
*/
.topnav .main {
display: inline-block;
}
.topnav .main a {
float: left;
}
.topnav a {
display: inline-block;
color: black;
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;
}
main {
padding-left: 16px;
}
#media screen and (max-width: 600px) {
.topnav a, .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;
}
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Menú</title>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
<script src="menu.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<nav class="topnav" id="myTopnav">
Home
<a href="#about" >About</a>
News
Contact
<!--<a href="" class="icon" id="menuBars">-->
☰
<i class="fa fa-bars"></i>
</a>
</nav>
</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;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I have tried all the option that were know to me. Please help me in removing the white space between image and the div tag. I don't know why white is appearing below the image and div. I can not figure out where the CSS'm wrong. I have been working on it since morning but I am not able to find the solution this.
Please help me. I have uploaded the screenshot.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rent-O-Roof</title>
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.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;
}
.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;
}
}
/* Style the footer */
.footer {
background-color:#777555 ;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
About US
Contact US
google form
facebook page
CUSTOMER REVIEW
CAREERS
TERM
OPTIONS
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div style="overflow: hidden;">
<img src="file:///Users/varunwadhwa/Desktop/Header.png" style="width: 100%; height: auto; overflow: hidden; padding: 0;">
<div style="background-color: red; font-size: 48px;">About Us
</div>
</div>
</body>
</html>
add display: block to the img tag like Zhenya Telegin said or give the "about" div a negative margin-top value, something like margin-top: -4px
It is space for descenders (the bits that hang off the bottom of 'y' and 'p') since img is an inline element by default. This attribute removes the gap.
Just add display: block to your img style.
jsfiddle
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rent-O-Roof</title>
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.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;
}
.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;
}
}
/* Style the footer */
.footer {
background-color:#777555 ;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
About US
Contact US
google form
facebook page
CUSTOMER REVIEW
CAREERS
TERM
OPTIONS
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<div style="overflow: hidden;">
<img src="http://via.placeholder.com/350x150" style="width: 100%; height: 150px; overflow: hidden; padding: 0; display: block;">
<div style="background-color: red; font-size: 48px;">About Us
</div>
</div>
</body>
</html>