Header Row and div do not center in the middle. The line is only at the top. I don't understand where the problem is.
I tried several methods and failed.
I changed the code several times and I couldn't.
I searched a lot on the site, but I didn't find a solution.
I tried to solve it and I didn't find something to solve this problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #192a56;
padding-top: 16px 0;
color: #fff;
}
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px
}
nav {
background-color: #575fcf;
padding: 16px 0;
}
nav li {
list-style: none;
display: inline;
margin-right: 16px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
nav li a {
color: #fff;
text-decoration: none;
}
.menu-hamburguer {
width: 32px;
}
.menu-hamburguer span {
height: 2px;
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 4px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EBAC Motors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Motors</h1>
<div class="menu-hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>
Sobre
</li>
<li>
Em destaque
</li>
<li>
Promoções
</li>
<li>
Contato
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Just adjust the padding that you added, which was 16 only at the bottom:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #192a56;
padding-top: 16px 0;
color: #fff;
}
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
nav {
background-color: #575fcf;
padding: 16px 0;
}
nav li {
list-style: none;
display: inline;
margin-right: 16px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
nav li a {
color: #fff;
text-decoration: none;
}
.menu-hamburguer {
width: 32px;
}
.menu-hamburguer span {
height: 2px;
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 4px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EBAC Motors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Motors</h1>
<div class="menu-hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>
Sobre
</li>
<li>
Em destaque
</li>
<li>
Promoções
</li>
<li>
Contato
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px
If you change this to padding: 8px I think this might be what you want.
Related
I've created a grid, and it's just supposed to be 4 rows at the moment, so to see the rows I added a border to them, however I'm only seeing a line, not borders of different divs in my grid.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
When you run the code, you can see a white line at the top but that's it. I'm not sure why this is happening, but it's possible it has something to do with the article? I'm fairly new to HTML and CSS so I'm not sure.
Any ideas?
The problem you described is caused by your main not having a set height. Give it a height: 100vh to fix this.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,html{
overflow-x: hidden;
font-family: "Poppins", sans-serif;
}
html{
background-color: black;
}
.webgl{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
nav{
color: white;
z-index: 2;
position: relative;
padding: 4rem 4rem;
display: flex;
justify-content: space-between;
}
nav a{
text-decoration: none;
color: white;
font-weight: bold;
}
nav ul{
list-style: none;
display: flex;
gap: 2rem;
}
main {
flex-grow: 1;
height: 100vh;
}
main > article {
display: grid;
height: 100%;
}
main > article > .article-section{
height: 100%;
border: 0.1px solid white;
background-color: white;
}
main > article> .article-section:nth-child(odd) {
background-color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Appearances</title>
</head>
<body>
<div class="header">
<nav>
B-1 Series Battle Droid - Appearances
<ul>
<li>Creation</li>
<li>Appearances</li>
</ul>
</nav>
</div>
<main>
<article>
<div class="article-section" id="section1"></div>
<div class="article-section" id="section2"></div>
<div class="article-section" id="section3"></div>
<div class="article-section" id="section4"></div>
<div class="article-section" id="section5"></div>
<div class="article-section" id="section6"></div>
</article>
</main>
</body>
</html>
Because the row blocks are empty, and at the same time do not have a given min-height. Shows only the borders, and the height of the content is 0. Accordingly, they are superimposed on each other, and it looks like a white line.
I am working on a navigation bar, and I am stuck because my code won't work as attended. When on mobile (760px) I want my nav-bar to show 3 div classes as an icon for the 'pop up' menubar. I just can't figure out why it won't show up.
The code, CSS:
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
Code, HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links"
<ul>
<li>
Home
<li>
<li>
About
<li>
<li>
Work
<li>
<li>
Our Project
<li>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
If anyone, can see the problem, it would be great if you could tell me.
I found the problem with the code. And it a simple mistake, but one I did not think would matter, or can't see why it worked. So if anyone can explain why this solved the issue, that would be great. Anyway, I moved the 'div burger class' to before the 'nav-links' in my HTML code. I am not sure why this fixed the issue, but it did. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com" rel='Stylesheet'>
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Project
</li>
</nav>
<script src="app.js"></script>
</body>
</html>
I can't figure out why it would matter to move the code, but I did in an attempt to see if that was the reason, and it was. If you can explain to me why this is the answer, that would be great.
Use Bootstrap for designs like this first.There is an error at the top of the css code you wrote, fix it.
body, *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
It has to be like this
I created three separate div elements for [logo, brand name],[product details] and [hamburger icon].
And in the CSS, I applied display=flex and flex=1. But the last two elements are stuck together. Can anyone help me with the mistakes in my code.
My Output
Sorry if the question was too silly, but I'm new to CSS.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container, .nav-links, .hamimg {
align-items: center;
display: flex;
flex: 1;
margin: auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
I have attached the updates.
Currently, on your implement, there is no need to set flex: 1 for all child elements of the header. If you set as follows, the nav, hamburger icon and logo will have the same width and it's not reasonable because their size is different.
I think your goal is to put the nav items in the center of header between logo and hamburger icon.
It can be simply done using margin: 0 auto.
Attached implementation shows the updated header.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.nav-links {
margin: 0 auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
Setting flex: 1 and margin: auto isn't nescessary, just add justify-content: space-between to your header and make sure to remove the default padding from your ul:
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.logo {
height: 20px;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
padding: 0;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
<div class="logo-container">
<img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="hamBurger">
</div>
</header>
This question already has answers here:
Button Center CSS
(7 answers)
Closed 4 years ago.
I've tried so many solutions, it's giving me a headache!
* {
box-sizing: border-box;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
}
/* Global */
.container {
width: 100%;
margin: auto;
overflow: hidden;
border: 1px solid red;
}
button {
background-color: #ff5f49;
border: none;
padding: 15px;
color: #fff;
font-size: 1.2em;
}
/* Navigation */
header {
background-color: #353c42;
min-height: 75px;
text-align: center;
font-size: 1.3em;
}
nav ul li {
display: inline;
padding: 15px;
text-align: center;
}
nav ul li a {
text-decoration: none;
text-transform: uppercase;
color: #fff
}
/* Jumbotron */
#jumbotron {
}
#jumbotron img {
display: block;
width: 60%;
margin: auto;
margin-top: 80px;
}
.button-1 {
width: 20%;
display: inline-block;
margin: 0 auto;
}
/* Clearfix */
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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">
<meta name="description" content="Digital Creative Agency Melbourne">
<meta name="keywords" content="Creative Agency Melbourne">
<meta name="author" content="KreativeZ">
<title>KreativeZ | Creative Agency Melbourne</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="jumbotron">
<div class="container">
<img src="img/KreativeZ_logo.png" alt="KreativeZ Logo">
<div class="container">
<button class="button-1" type="button">Get in touch!</button>
<button class="button-1" type="button">See Our Work</button>
</div>
</div>
</div>
</section>
</body>
</html>
Add ' text-align: center;' to the container.
* {
box-sizing: border-box;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
}
/* Global */
.container {
width: 100%;
margin: auto;
overflow: hidden;
border: 1px solid red;
text-align: center;
}
button {
background-color: #ff5f49;
border: none;
padding: 15px;
color: #fff;
font-size: 1.2em;
}
/* Navigation */
header {
background-color: #353c42;
min-height: 75px;
text-align: center;
font-size: 1.3em;
}
nav ul li {
display: inline;
padding: 15px;
text-align: center;
}
nav ul li a {
text-decoration: none;
text-transform: uppercase;
color: #fff
}
/* Jumbotron */
#jumbotron {
}
#jumbotron img {
display: block;
width: 60%;
margin: auto;
margin-top: 80px;
}
.button-1 {
width: 20%;
display: inline-block;
margin: 0 auto;
}
/* Clearfix */
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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">
<meta name="description" content="Digital Creative Agency Melbourne">
<meta name="keywords" content="Creative Agency Melbourne">
<meta name="author" content="KreativeZ">
<title>KreativeZ | Creative Agency Melbourne</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="jumbotron">
<div class="container">
<img src="img/KreativeZ_logo.png" alt="KreativeZ Logo">
<div class="container">
<button class="button-1" type="button">Get in touch!</button>
<button class="button-1" type="button">See Our Work</button>
</div>
</div>
</div>
</section>
</body>
</html>
You might add display:flex and justify-content:center to the container of your buttons:
* {
box-sizing: border-box;
}
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
}
/* Global */
.container {
width: 100%;
margin: auto;
overflow: hidden;
border: 1px solid red;
}
.container .container{
display:flex;
justify-content: center;
}
button {
background-color: #ff5f49;
border: none;
padding: 15px;
color: #fff;
font-size: 1.2em;
}
/* Navigation */
header {
background-color: #353c42;
min-height: 75px;
text-align: center;
font-size: 1.3em;
}
nav ul li {
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Our Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="jumbotron">
<div class="container">
<img src="img/KreativeZ_logo.png" alt="KreativeZ Logo">
<div class="container">
<button class="button-1" type="button">Get in touch!</button>
<button class="button-1" type="button">See Our Work</button>
</div>
</div>
</div>
</section>
I want to make the menu to be always on the top when scrolling down the page but the heading that is above the menu to hide. I would like only the menu that is in div tag with id="fixed-div" to stay on the top and the other menu to hide.
I want the menu to pull up and stay fixed on the top of the page like in this site: https://www.w3schools.com/html/default.asp
body {
margin: 0px;
background-color: #fcede0;
height: 900px;
}
#my-logo {
width: 150px;
height: 100px;
position: absolute;
left: -10px;
top: -25px;
z-index: -1;
}
#page-title {
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 25px;
text-align: center;
color: #22117a;
}
#inner-title {
padding-left: 120px;
padding-right: 70px;
}
body div img::selection, #inner-title::selection, #menu-up li a::selection, #menu-down li a::selection, body div article a img::selection, footer table tr td div::selection, footer a::selection{
color: #ef4810;
background-color: lightblue;
}
#menu-up{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu-down {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: right;
background-color: #ef4810;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 3px;
}
#menu-up li{
float: left;
display: inline-block;
font-size: 20px;
width: 200px;
}
#menu-down li {
float: right;
display: inline-block;
font-size: 15px;
width: 250px;
}
#menu-up li a:link, #menu-down li a:link, #menu-up li a:visited, #menu-down li a:visited {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: #22117a;
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
#menu-down li a:link, #menu-down li a:visited {
color: #972d09;
}
#menu-up li a:hover, #menu-down li a:hover {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: white;
/*background-color:red;*/
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
.HTML-CSS-logo {
height: 300px;
width: 300px;
box-shadow: 0px 0px 100px 10px black;
border-radius: 40px;
}
#HTML-article, #CSS-article {
display: inline-block;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
#div-article {
padding-top: 150px;
text-align: center;
margin-bottom: 130px;
}
.HTML-CSS-logo:hover {
-webkit-filter: blur(4px);
filter: blur(4px);
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Сайт за електронно обучение по HTML5 и CSS3">
<meta name="keywords" content="HTML5, CSS3, обучение, електронно обучение, самоучител">
<meta name="description" content="HTML5 и CSS3 обучение">
<meta name="author" content="Иванка Янкулова">
<meta name="copyright" content="Иванка Янкулова">
<!--<meta name="pubdate" content="2017-12-21">-->
<title>HTML5 и CSS3 обучение</title>
<link rel="icon" href="images/icon.png" type="image" >
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="stylesheet" type="text/css" href="Index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="page-title">
<img id="my-logo" src="images/logo2.png" alt="Лого" title="Лого" />
<div id="inner-title">Сайт за електронно обучение по HTML5 и CSS3</div>
</div>
</header>
<div id="fixed-div">
<nav>
<ul id="menu-up">
<li id="home-button" class="icon-bar">
<i class="fa fa-home"></i>
</li>
<li>
HTML5
</li>
<li>
CSS3
</li>
<li>
Разработки
</li>
<li>
Справки
</li>
</ul>
</nav>
</div>
<nav>
<ul id="menu-down">
<li>
Полезни връзки
</li>
<li>
Препоръки и забележки
</li>
<li>
Информация за сайта
</li>
<li>
Контакти
</li>
</ul>
</nav>
<div id="div-article">
<article id="HTML-article">
<a href="">
<img class="HTML-CSS-logo" src="images/HTML-logo.png" alt="HTML5" title="HTML5" />
</a>
</article>
<article id="CSS-article">
<a href="">
<img class="HTML-CSS-logo" src="images/CSS-logo.png" alt="CSS3" title="CSS3" />
</a>
</article>
</div>
</body>
</html>
You shoud listen the event of window scroll, using js control #menu-up's position be fixed or static
<!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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
*{color:#fff;padding:0;margin:0;}
.m-header{height: 68px;background: #ff00ff;}
.m-nav{height: 44px;width:100%;background: #0026ff;}
.m-main{height: 1500px;background: #73ff00;line-height: 200px;}
.m-fixed{position: fixed;top:0;left:0;z-index:3;}
.pt44{padding-top:44px;}
</style>
</head>
<body>
<div class="m-header">I'm header</div>
<div class="m-nav">I'm the nav</div>
<div class="m-main">I'm main content</div>
<script type="text/javascript">
var oNav = $('.m-nav');
var oMain = $('.m-main');
var nNavTop = oNav.offset().top;
var sNavTop= 0;
$(window).scroll(function(){
sNavTop = $(this).scrollTop();
if(sNavTop >= nNavTop){
oNav.addClass('m-fixed');
oMain.addClass('pt44');
}else{
oNav.removeClass('m-fixed');
oMain.removeClass('pt44');
}
});
</script>
</body>
</html>
Add position: fixed css rule to your css code of your menu
like this:
#menu-up{
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
Just add
#fixed-div
{
position:fixed;
}