I'm attempting to implement a simple hamburger icon nav menu for a website I'm developing, but I'm having issues where the contents of the navigation menu are opening/appearing within the navigation menu and not below the nav bar.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</header>
<br>
</body>
</html>
CSS:
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
overflow: auto;
}
/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer{
margin: auto;
position: relative;
right: 35px;
}
.navHeader{
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
.navHeader #myLinks{
display: none;
position: relative;
top: 5px;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta{
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer{
overflow: hidden;
}
button{
padding: 9px 5px;
background-color: rgba(35,255,0,0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: yellow;
}
The issue here is that your <header> class .navHeader is using display: flex; therefore items within that element will act as flex elements. You can read more about those Here
There are a few ways you could go about this.
I think your best solution is to move the <div id="myLinks"></div> block below the header.
Then in your CSS: remove the overflow: auto from *.
Remove the class .navHeader before #myLinks, and add a few more properties to make sure the block is below your header #myLinks{top: 65px; padding: 10px; text-align: center;}
here is the full code:
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Buck's Farmstand</title>
<link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="mainPageBody">
<header class="navHeader">
<div class=buttonContainer>
<a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
</div>
<div class=logoContainer>
<img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo">
</div>
<!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
<a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<div id="myLinks">
Produce
Online-Order
About
Contact
</div>
<br>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
CSS
/*overrides everything for specifc page*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
/*background-color: #FFDAB9;*/
/* overflow: auto; */
}
/*referring to all of these categories not specifc to a class/ID*/
li,
a,
button {
font-family: "cursive", cursive;
font-weight: 500;
font-size: 16px;
color: #000000;
text-decoration: none;
}
/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo {
object-fit: cover;
position: relative;
height: 60px;
width: 100%;
cursor: pointer;
}
.logoContainer {
margin: auto;
position: relative;
right: 35px;
}
.navHeader {
position: fixed;
width: 100%;
background: #deb887;
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 2%;
height: 65px;
overflow: hidden;
z-index: 950;
}
#myLinks {
display: none;
position: relative;
top: 65px;
text-align: center;
padding: 10px;
width: 100%;
background: #deb887;
}
/* Style the hamburger menu */
.hamIcon {
overflow: auto;
background: none;
display: block;
position: fixed;
right: 20px;
top: 23px;
}
.cta {
background: #deb887;
overflow: hidden;
width: 15%;
}
.buttonContainer {
overflow: hidden;
}
button {
padding: 9px 5px;
background-color: rgba(35, 255, 0, 0.5);
border: 2px solid;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: yellow;
}
I am currently using vanilla JS + HTML to render a different HTML file, (loadscreen.html) in index.html in a div element. The problem is that when the HTML is loaded, it's supposed to be full page, but only renders a tiny portion. Here's what it's supposed to look like:
But here's what the page actually renders:
Here is my JS+HTML code below for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div id="main"></div>
</body>
</html>
<script>
var state = "turnOn";
const setState = setTimeout(changeStateToLoaded, 10000);
var render = function (template, node) {
if (!node) return;
node.innerHTML = (typeof template === 'function' ? template() : template);
};
var renderTemplate = function () {
if (state === 'turnOn') {
template = '<object type="text/html" data="loadingscreen.html" ></object>';;
}
else if(state === 'loaded') {
template = '<h1>Hello world!</h1>';
}
return template;
};
function changeStateToLoaded() {
state = "loaded";
render(renderTemplate, document.querySelector('#main'));
}
render(renderTemplate, document.querySelector('#main'));
</script>
This is the code for loadingscreen.html (the HTML for the loading screen):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="css/loading_screen/loadingscreen.css">
</head>
<body>
<div class="window">
<div class="logo">
<p class="top">Microsoft</p>
<p class="mid">Windows<span>97</span></p>
<p class="bottom">Professional</p>
</div>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
and the CSS for loadingscreen.html:
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,700');
body{
background: #000;
height: 100%;
font-family: 'Roboto', sans-serif;
color: #fff;
}
.window{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.container{
width: 150px;
height: 10px;
border: 2px solid #b2b2b2;
border-radius: 7px;
margin: 0 auto;
padding: 2px 1px;
overflow: hidden;
font-size: 0;
}
.box{
width: 9px;
height: 100%;
background: linear-gradient(to bottom, #2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);
display: inline-block;
margin-right: 2px;
animation: loader 2s infinite;
animation-timing-function: linear;
}
.logo{
width: 220px;
margin: 50px auto;
}
.logo p{
margin: 0;
padding: 0;
}
.top{
font-size: 16px;
font-weight: 300;
line-height: 16px;
}
.top:after{
content:"\00a9";
font-size: 10px;
position: relative;
top: -5px;
margin-left: 2px;
}
.mid{
font-size: 46px;
font-weight: 700;
line-height: 36px;
}
.mid span{
font-size: 22px;
display: inline-block;
vertical-align: top;
color: #FF6821;
margin-top: -8px;
}
.logo .bottom{
font-size: 30px;
font-weight: 300;
line-height: 30px;
margin-left: 5px;
}
#keyframes loader{
0%{
transform: translate(-30px);
}
100%{
transform: translate(150px);
}
}
How would I make the loadingscreen.html page render full page in the code?
I'm trying to create that every time that the image is clicked, it will decrease in size until it completely disappears. But I can't do this, help me!
HTML code:
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="D:\MATEUS\Programação\Stupid project\images\levi.png" alt="Levi" id="image">
</body>
</html>
<script type="main/javascript" src="jquery-3.3.1.js"></script>
CSS code:
#import "variables.css";
#import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght#300&display=swap');
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
}
Assuming you want to scale the image down in size on each click we can do this:
set the inital scale of the image to 1 (through a CSS variable --scale)
set up an event listener on the image
when the image is clicked read the current value of --scale, decrease it by 0.1, say, (as long as it hasn't already hit 0)
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>Stupid Project</title><style>
*
{
margin: 0%;
font-family: 'Ubuntu', sans-serif;
background-color: var(--body-color);
}
.header-top
{
background-color: var(--body-color);
height: 49px;
}
.header-top > h1
{
color: white;
display: inline-block;
vertical-align: top;
margin-left: 10px 10px;
}
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 90px;
border-radius: 20px;
transform: scale(var(--scale));
}
</style>
</head>
<body>
<header class="header-top">
<h1>Shrink the image</h1>
</header>
<img src="https://picsum.photos/id/1016/1024/768" alt="test picture" id="image">
<script>
const image = document.getElementById("image");
image.style.setProperty('--scale', 1);
image.addEventListener("click", function () {
const curScale = image.style.getPropertyValue('--scale');
if (curScale > 0) {image.style.setProperty('--scale', curScale - 0.1); }
});
</script>
</body>
</html>
I found the solution to the problem, here's the example code:
HTML:
<button type="button" id="button" onclick="zoomout()">Click Me!</button>
<img src="https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" id="image">
CSS:
#image
{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 0px; /* 90px */
margin-bottom: 10px;
border-radius: 20px;
transition: all 1s;
}
#button
{
color: white;
margin-left: 570px;
margin-top: 39px;
margin-bottom: 0%;
padding: 15px 32px;
background-color: var(--button-color);
}
JavaScript:
function zoomout() {
var GFG = document.getElementById("image");
var currWidth = GFG.clientWidth;
GFG.style.width = (currWidth - 100) + "px"
}
You can just reduce the image width one by one (or with whatever rate you wish), and to visualize this change have some transition set on the image.
const img = document.querySelector("img");
const imgWidth = getComputedStyle(img, null).getPropertyValue('width')
document.querySelector("button").addEventListener("click", () => {
for (let i = parseInt(imgWidth); i >= 0; i--) {
img.style.width = `${i}px`
}
})
img {
display: block;
width: 200px;
transition: all 1s;
}
button {
margin-bottom: 5px;
}
<button>Click</button>
<img src="https://images.unsplash.com/photo-1618141411216-96de9f2bd309?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
I made my first responsive navbar and everything is good but when it comes to mobile, when I click on the span I'm unable to view the navbar elements like HOME, ABOUT, etc...
I used HTML , CSS , JavaScript
Now, The problem is with the CSS media query!!
So please help me in fixing this!!!
Here are my codes...
HTML
<!doctype html>
<html lang="en">
<!-- HEAD OF HTML -->
<head>
<!-- Required Meta-tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#1C1C1C">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<!-- External CSS files -->
<link rel="stylesheet" href="index_p.css">
<!-- External JavaScript files
<script src="index_p.js"></script> -->
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
<!-- JQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
JQuery Ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<!-- Title -->
<title>Pytheo</title>
<!-- Logo (Favicon) -->
<link rel="icon" href="Logo.png" type="image/x-icon">
</head>
<body>
<!-- HEADER -->
<header>
<!-- NAVBAR -->
<div class="navbar">
<div class="logo">
<h3>Pytheo</h3>
</div>
<a class="span-btn">
<span></span>
<span></span>
<span></span>
</a>
<div class="navBar">
<a class="active" href="#">Home</a>
About
Contact
Author
<span>
<a class="spec" href="#">Articles</a>
</span>
</div>
</div>
</header>
<!-- JAVASCRIPT FILES -->
<!-- JQuery -->
<!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->
<!-- JQuery Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- External JavaScript files -->
<script src="index_p.js"></script>
</body>
</html>
CSS
/* IMPORTS */
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css?family=Alex+Brush|Oleo+Script+Swash+Caps&display=swap');
#import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital#0;1&family=IBM+Plex+Sans+Condensed:ital#0;1&family=IBM+Plex+Sans:ital,wght#0,100;0,400;0,700;1,100;1,400;1,700&family=IBM+Plex+Serif:ital#0;1&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,500;0,600;0,700;1,500;1,600;1,700&display=swap');
/* VARIABLES */
:root {
/* COLORS */
/*Pure Mono*/
--light: #FFFFFF;
--black: #000000;
/*White*/
--primary: #FCFAFF;
--light-primary: #F7F5FA;
--dark-primary: #E4E1E7;
/*Secondary*/
--secondary: #F8FAF5;
--light-secondary: #F3F5F0;
--dark-secondary: #EEF0EB;
/*Grey*/
--light-grey: #D7D9D4;
--dark-grey: #C1BFC4;
/*Dark*/
--dark: #121212;
--light-dark: #505050;
--mid-dark: #323232;
/*Gradient*/
--grad-cyan: #00C6FF;
--grad-blue: #0072FF;
/*Accent*/
--ac-cyan: #00C6FF;
--ac-ltcyan: #52d8ff;
--ac-dkcyan: #007091;
--ac-blue: #0072FF;
--ac-ltblue: #308cff;
--ac-dkblue: #004191;
}
/*___________________________________________________________
HTML Style Configuration
__________________________________________________________*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background: var(--primary);
width: 100%;
/*overflow-wrap: break-word;*/
}
/*___________________________________________________________
Navbar Styling
_____________________________________________________________*/
.navbar {
position: relative;
height: 70px;
top: 0;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background: var(--light-primary);
}
.logo {
margin-left: 90px;
font-size: 25px;
/*font-family: 'Oleo Script Swash Caps', cursive;*/
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
color: var(--grad-blue);
float: left;
cursor: pointer;
}
.navBar {
position: absolute;
float: right;
right: 80px;
}
.navbar .navBar .active {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
/*box-shadow: 0.5px 0.5px 1px var(--ac-cyan);*/
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navbar .navBar .active:hover {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
}
.navbar .navBar span {
margin-left: 8px;
}
.navbar .navBar .spec {
color: var(--light);
/*background: linear-gradient(to bottom right, var(--ac-ltblue), var(--ac-ltcyan));*/
background: var(--ac-blue);
border: none;
border-radius: 10px;
font-size: 14px;
padding: 11px;
margin-left: 16px;
text-transform: uppercase;
box-shadow: 1px 1px 2px var(--ac-cyan);
}
.navbar .navBar .spec:hover {
background: linear-gradient(to bottom right, var(--ac-ltcyan), var(--ac-ltblue));
transition: 0.6s;
}
.navbar .navBar .spec:active {
background: linear-gradient(45deg, var(--ac-dkcyan), var(--ac-dkblue));
}
.navBar a {
color: var(--ac-blue);
margin-left: 20px;
font-size: 0.9em;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
padding: 6px;
}
.navBar a:hover {
background: linear-gradient(to bottom right, var(--grad-cyan), var(--grad-blue));
transition: 0.1s linear;
color: var(--light);
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navBar a:active {
background: linear-gradient(45deg, var(--ac-ltcyan), var(--ac-ltblue));
/*transition: 0.1s linear;*/
}
.span-btn {
display: none;
position: absolute;
right: 20px;
}
.span-btn:hover > span {
background: var(--ac-ltcyan);
}
.span-btn span {
display: block;
margin: 7px;
width: 40px;
height: 3px;
background: var(--ac-ltblue);
}
#media only screen and (max-width: 840px)
{ .logo {
margin-left: 20px;
margin-right: 50px;
font-size: 30px;
font-family: 'Oleo Script Swash Caps', cursive;
float: left;
cursor: pointer;
}
.navbar {
overflow: auto;
height: 70px;
top: 0;
width: 100%;
margin-left: 3px;
margin-right: 10px;
margin-top: 10px;
display: flex;
align-items: center;
background: var(--secondary);
border-radius: 4px;
}
.navBar {
width: 100%;
right: 0;
top: 80px;
background: var(--secondary);
overflow: hidden;
max-height: 0;
}
.navBar a {
display: block;
text-align: center;
padding: 12px;
margin: 0;
}
.span-btn {
display: block;
cursor: pointer;
}
.show {
max-height: 510px;
}
}
JavaScript
$(".span-btn").on("click", function() {
$('.navbar').toggleClass("show");
});
Your JavaScript is referencing $(".span-button") which doesn't exist in the HTML.
Rename $(".span-button") to $(".span-btn") in your JavaScript.
You are loading 'index_p.js' before your JQuery. JQuery must be loaded first.
"$ is not defined" that means $ is either a variable or a method which you are trying to use before declaring it using var keyword.
you should link jQuery before linking your external js file because if u did the opposite "Which you have done on your code" that will cause "$ is not defined" problem and I recommend you to add the js files at the end of the body so u don't face that error but if u didnt add the files at the end of the body u can use that code :
Try this html code :
<!doctype html>
<html lang="en">
<head>
<!-- Required Meta-tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#1C1C1C">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<!-- External CSS files -->
<link rel="stylesheet" href="index_p.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
<!-- Title -->
<title>Pytheo</title>
<!-- Logo (Favicon) -->
<link rel="icon" href="#" type="image/x-icon">
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<h3>Pytheo</h3>
</div>
<a class="span-btn">
<span></span>
<span></span>
<span></span>
</a>
<div class="navBar">
<a class="active" href="#">Home</a>
About
Contact
Author
<span>
<a class="spec" href="#">Articles</a>
</span>
</div>
</div>
</header>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- JQuery Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- External JavaScript files -->
<script src="index_p.js"></script>
</body>
</html>
you should use this if u imported your external JS at the header:
$(document).ready(function(){
$(".span-button").on("click", function() {
$('.navbar').toggleClass("show");
});
});
For your CSS error try this code :
$(".span-btn").on("click", function() {
$('.navBar').toggleClass("show");
});
/* IMPORTS */
#import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700;900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700;800;900&display=swap');
#import url('https://fonts.googleapis.com/css?family=Alex+Brush|Oleo+Script+Swash+Caps&display=swap');
#import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital#0;1&family=IBM+Plex+Sans+Condensed:ital#0;1&family=IBM+Plex+Sans:ital,wght#0,100;0,400;0,700;1,100;1,400;1,700&family=IBM+Plex+Serif:ital#0;1&display=swap');
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght#0,500;0,600;0,700;1,500;1,600;1,700&display=swap');
/* VARIABLES */
:root {
/* COLORS */
/*Pure Mono*/
--light: #FFFFFF;
--black: #000000;
/*White*/
--primary: #FCFAFF;
--light-primary: #F7F5FA;
--dark-primary: #E4E1E7;
/*Secondary*/
--secondary: #F8FAF5;
--light-secondary: #F3F5F0;
--dark-secondary: #EEF0EB;
/*Grey*/
--light-grey: #D7D9D4;
--dark-grey: #C1BFC4;
/*Dark*/
--dark: #121212;
--light-dark: #505050;
--mid-dark: #323232;
/*Gradient*/
--grad-cyan: #00C6FF;
--grad-blue: #0072FF;
/*Accent*/
--ac-cyan: #00C6FF;
--ac-ltcyan: #52d8ff;
--ac-dkcyan: #007091;
--ac-blue: #0072FF;
--ac-ltblue: #308cff;
--ac-dkblue: #004191;
}
/*___________________________________________________________
HTML Style Configuration
__________________________________________________________*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { scroll-behavior: smooth; }
body {
background: var(--primary);
width: 100%;
/*overflow-wrap: break-word;*/
}
/*___________________________________________________________
Navbar Styling
_____________________________________________________________*/
.navbar {
position: relative;
height: 70px;
top: 0;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background: var(--light-primary);
}
.logo {
margin-left: 90px;
font-size: 25px;
/*font-family: 'Oleo Script Swash Caps', cursive;*/
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
color: var(--grad-blue);
float: left;
cursor: pointer;
}
.navBar {
position: absolute;
float: right;
right: 80px;
}
.navbar .navBar .active {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
/*box-shadow: 0.5px 0.5px 1px var(--ac-cyan);*/
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navbar .navBar .active:hover {
background: linear-gradient(to bottom right, #00C6FF, #0072FF);
padding: 6px;
color: var(--light);
}
.navbar .navBar span {
margin-left: 8px;
}
.navbar .navBar .spec {
color: var(--light);
/*background: linear-gradient(to bottom right, var(--ac-ltblue), var(--ac-ltcyan));*/
background: var(--ac-blue);
border: none;
border-radius: 10px;
font-size: 14px;
padding: 11px;
margin-left: 16px;
text-transform: uppercase;
box-shadow: 1px 1px 2px var(--ac-cyan);
}
.navbar .navBar .spec:hover {
background: linear-gradient(to bottom right, var(--ac-ltcyan), var(--ac-ltblue));
transition: 0.6s;
}
.navbar .navBar .spec:active {
background: linear-gradient(45deg, var(--ac-dkcyan), var(--ac-dkblue));
}
.navBar a {
color: var(--ac-blue);
margin-left: 20px;
font-size: 0.9em;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
padding: 6px;
}
.navBar a:hover {
background: linear-gradient(to bottom right, var(--grad-cyan), var(--grad-blue));
transition: 0.1s linear;
color: var(--light);
box-shadow: 1px 1px 1px var(--ac-cyan);
}
.navBar a:active {
background: linear-gradient(45deg, var(--ac-ltcyan), var(--ac-ltblue));
/*transition: 0.1s linear;*/
}
.span-btn {
display: none;
position: absolute;
right: 20px;
}
.span-btn:hover > span {
background: var(--ac-ltcyan);
}
.span-btn span {
display: block;
margin: 7px;
width: 40px;
height: 3px;
background: var(--ac-ltblue);
}
#media only screen and (max-width: 840px)
{ .logo {
margin-left: 20px;
margin-right: 50px;
font-size: 30px;
font-family: 'Oleo Script Swash Caps', cursive;
float: left;
cursor: pointer;
}
.navbar {
overflow:visible;
height: 70px;
top: 0;
width: 100%;
margin-left: 3px;
margin-right: 10px;
margin-top: 10px;
display: flex;
align-items: center;
background: var(--secondary);
border-radius: 4px;
}
.navBar {
display:none;
width: 100%;
right: 0;
top: 80px;
background: var(--secondary);
/* max-height: 0;
*/ }
.navBar a {
display: block;
text-align: center;
padding: 12px;
margin: 0;
}
.span-btn {
display: block;
cursor: pointer;
}
.show {
max-height: 510px;
display:block;
}
}
<html lang="en">
<head>
<!-- Required Meta-tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="theme-color" content="#1C1C1C">
<meta name="description" content="">
<meta name="robots" content="index, follow">
<!-- External CSS files -->
<link rel="stylesheet" href="index_p.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>
<!-- Title -->
<title>Pytheo</title>
<!-- Logo (Favicon) -->
<link rel="icon" href="#" type="image/x-icon">
</head>
<body>
<header>
<div class="navbar">
<div class="logo">
<h3>Pytheo</h3>
</div>
<a class="span-btn">
<span></span>
<span></span>
<span></span>
</a>
<div class="navBar">
<a class="active" href="#">Home</a>
About
Contact
Author
<span>
<a class="spec" href="#">Articles</a>
</span>
</div>
</div>
</header>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- JQuery Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- External JavaScript files -->
<script src="index_p.js"></script>
</body>
</html>
The error was here :
.navbar {
overflow: auto;
.navbar {
position: fixed; .
You opened two selectors with the same name and didn't close it.
I have another question on you. I decided to create something like web-fanpage of Mr.Robot. I have wanted to practice html and css + learn JS. But there is a problem I cant solve. There is space between divs. I tried many tutorials how to remove it but none of them helped.
body {
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
}
#main {
height: 100%;
width: 100%;
}
header {
background: black;
padding: 1px;
max-width: 100%;
}
header p {
margin-left: 50px;
font-family: 'Inconsolata', monospace;
font-size: 50px;
text-align: center;
}
.barva {
color: #B20707;
}
.menu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: black;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.menu a {
display: block;
text-decoration: none;
color: white;
font-size: 20px;
padding: 8px;
transition: 0.3s;
margin-left: 20px;
font-family: 'Poppins', sans-serif;
}
.menu a:hover {
color: #B20707;
}
.Openbt {
cursor: pointer;
position:absolute;
top: 0;
left: 0;
margin-top: 20px;
margin-left: 10px;
float:left;
color: #B20707;
font-size: 50px;
}
.menu .closebt {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #B20707;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
}
.domu {
height: auto;
}
img
{
max-width: 100%;
}
.about {
height: auto;
max-width: 100%;
min-height: 250px;
background: black;
}
<!doctype html>
<html lang="cs-cz">
<head>
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Yaaa boiii</title>
</head>
<body>
<header>
<p style="color:white "><span class="barva">ID:_ROOT:</span>Our<span class="barva">_democracy_</span>has<span class="barva">_</span><span class="barva">been</span>_hacked</p>
<div class=Openbt>
<span onclick="openNav()"><i class="fa fa-bars"></i></span>
</div>
</header>
<div id="mySidemenu" class="menu">
×
Home
Home
Home
Home
Home
</div>
<div id="main"> <!-- Veškerý kontent -->
<div class="domu">
<img src="obrazky/robot.jpg" width="1920" height="1000" />
</div>
<div class="about">
</div>
</div>
<script>
function openNav() {
document.getElementById('mySidemenu').style.width = "250px";
document.getElementById('header').style.marginLeft = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById('mySidemenu').style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
}
</script>
</body>
</html>
Maybe you noticed that I had to set some width and height to the picture. How do I set it height 100% and width 100%? I tried to type it into .domu but it didnt work.
Two solutions both involve changing your css;
1) You can change your body background color to match the about background color. This can be done by adding the following to your css.
body
{
background: black;
}
2)You can use the display: block; style on your img tag.
<img src="obrazky/robot.jpg" width="1920" height="1000" style="display: block;"/>
Good luck