I'm having a little problem with my Navbar icons. I'm trying to put my Instagram and YouTube icons, but they don't show up. When I click the link, I go to youtube/instagram page, but they are not displaying in the navbar.
body {
font-family: monospace;
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
height: 80px;
background: #313840;
}
nav img {
width: 150px;
position: absolute;
top: 5px;
left: 0;
margin-left: 35px;
}
.social-media-icons {
height: 10px;
font-size: 30px;
margin-bottom: 0px;
margin-left: 200px;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #313840;
color: #fff;
height: 40px;
}
.fa-instagram {
background: #313840;
color: white;
margin-top: 30px;
height: 40px;
margin-right: 30px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="header.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="social-media-icons">
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="mmt-white.png">
<ul>
<li> Home</li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<li2>Acessar</li>
</ul>
</nav>
</body>
</html>
This is because the social media icons are part of the Font Awesome Brands font family.
Change the mark up from fas to fab
<div class="social-media-icons">
</div>
body {
font-family: monospace;
}
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
nav {
height: 80px;
background: #313840;
}
nav img {
width: 150px;
position: absolute;
top: 5px;
left: 0;
margin-left: 35px;
}
.social-media-icons {
height: 10px;
font-size: 30px;
margin-bottom: 0px;
margin-left: 200px;
}
.fa:hover {
opacity: 0.7;
}
.fa-youtube {
background: #313840;
color: #fff;
height: 40px;
}
.fa-instagram {
background: #313840;
color: white;
margin-top: 30px;
height: 40px;
margin-right: 30px;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="header.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="social-media-icons">
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="mmt-white.png">
<ul>
<li> Home</li>
<li>Onde Atuamos</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>comecando</li>
<li>Contacte-nos</li>
<li2>Acessar</li>
</ul>
</nav>
</body>
</html>
Related
In my social media icons project, I tried hiding my text using opacity 0. When a user will mouse hover on my tag or icons the text will be shown. but my hover transition doesn't work. Please at first try using opacity 1 in my CSS in .icon. enter image description here.Please solve my hovering problem. I can't understand what's the bug
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(235, 219, 222);
font-family: 'Poppins', sans-serif;
}
.wrapper {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
position: relative;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
text-decoration: none;
font-size: 22px;
margin: 10px;
border-radius: 50%;
text-align: center;
line-height: 57px;
color: black;
transition: 0.4s;
}
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
transition: 0.4s;;
opacity: 0;
}
.icon_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon::before {
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
background-color: #fff;
top:83% ;
left:42% ;
transform: rotate(45deg);
transition: 0.4s;
}
.wrapper>.icon_holder:nth-child(1)>a:hover .wrapper>.icon_holder:nth-child(1)>.icon{
opacity: 1;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="icon_holder">
<div class="icon">Facebook</div>
<i class="fab fa-facebook-f"></i>
</div>
<div class="icon_holder">
<div class="icon">Twitter</div>
<i class="fab fa-twitter"></i>
</div>
<div class="icon_holder">
<div class="icon">Instagram</div>
<i class="fab fa-instagram"></i>
</div>
<div class="icon_holder">
<div class="icon">Reddit</div>
<i class="fab fa-reddit-alien"></i>
</div>
<div class="icon_holder">
<div class="icon">Youtube</div>
<i class="fab fa-youtube"></i>
</div>
</div>
</body>
</html>
Please help me.
Your hover rule is wrong and won't trigger, replace it with:
.wrapper .icon_holder:hover .icon {
opacity: 1;
}
Working example:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(235, 219, 222);
font-family: 'Poppins', sans-serif;
}
.wrapper {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
a {
position: relative;
display: block;
width: 57px;
height: 57px;
background-color: #fff;
text-decoration: none;
font-size: 22px;
margin: 10px;
border-radius: 50%;
text-align: center;
line-height: 57px;
color: black;
transition: 0.4s;
}
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
transition: 0.4s;;
opacity: 0;
}
.icon_holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icon::before {
content: '';
position: absolute;
display: block;
width: 13px;
height: 13px;
background-color: #fff;
top:83% ;
left:42% ;
transform: rotate(45deg);
transition: 0.4s;
}
.wrapper .icon_holder:hover .icon {
opacity: 1;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div class="icon_holder">
<div class="icon">Facebook</div>
<i class="fab fa-facebook-f"></i>
</div>
<div class="icon_holder">
<div class="icon">Twitter</div>
<i class="fab fa-twitter"></i>
</div>
<div class="icon_holder">
<div class="icon">Instagram</div>
<i class="fab fa-instagram"></i>
</div>
<div class="icon_holder">
<div class="icon">Reddit</div>
<i class="fab fa-reddit-alien"></i>
</div>
<div class="icon_holder">
<div class="icon">Youtube</div>
<i class="fab fa-youtube"></i>
</div>
</div>
</body>
</html>
you have an error on the CSS :
.icon {
position: relative;
background-color: #fff;
border-radius: 5px;
margin: 5px;
padding: 10px;
**transition: 0.4s;;**
opacity: 0;
}
There is an extra semicolon at the transition line, a small typo error..
I have a mini project here. When I try to text-align: center; in body, the icons don't follow. If I remove the left: 0; in .content-label i in css, it stays on the right and I have no clue how to put it on the left side.
For more info, please check my code.
https://jsfiddle.net/Foxseiz/zse8tuL9/2/
There you go.
Try not to use position absolute as first priority as its the last option to style and element :)
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
}
.content-label {
position: relative;
}
.content-label i {
left: 0;
top: 8px;
padding: 9px 8px;
color: #aaa;
transition: 0.3s;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
.content-label {
position: relative;
display: flex;
flex-direction: row-reverse;
margin: 0 auto;
text-align: center;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
Use
.content-label.inputIconBg i {
margin-right: -42px;
}
to align icon inside input
You can use Flexbox.
You can set your content-label as flex element and center with justify-content property.
N.B. i used order property because you set the i tag after the input, so i change the order.
/* CSS files add styling rules to your content */
body {
font-family: verdana, arial, sans-serif !important;
margin: auto;
max-width: 800px;
margin-top: 50px;
text-align: center;
}
input[type="text"] {
width: 180px;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: dodgerBlue;
box-shadow: 0 0 8px 0 dodgerBlue;
}
.content-label input[type="text"] {
padding-left: 50px;
order:2;
}
.content-label {
position: relative;
display:flex; /* add this */
justify-content:center; /* add this */
}
.content-label i {
/*position: absolute;
left: 0;
top: 8px;*/ /* comment this */
margin: 9px 0 8px 8px;
color: #aaa;
transition: 0.3s;
order:1;
}
.content-label input[type="text"]:focus + i {
color: dodgerBlue;
}
.content-label.inputIconBg i {
background-color: #aaa;
color: #fff;
padding: 9px 8px;
border-radius: 4px 0 0 4px;
line-height: inherit !important;
width: 40px;
text-align: center;
}
.content-label.inputIconBg input[type="text"]:focus + i {
color: #fff;
background-color: dodgerBlue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"/>
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" />
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/ed2e310181.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="full-content">
<div id="content">
<form autocomplete="off">
<div class="content-label inputIconBg">
<input type="text" id="cost" placeholder="Cost"/>
<i class="fas fa-dollar-sign" data-toggle="tooltip" title="Cost" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="margin" value="1.4" placeholder="Margin"/>
<i class="fas fa-coins" data-toggle="tooltip" title="Margin" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="labor" value="35" placeholder="Labor"/>
<i class="fas fa-hammer" data-toggle="tooltip" title="Labor" data-placement="left"></i>
</div>
<div class="content-label inputIconBg">
<input type="text" id="shipping" value="15" placeholder="Shipping"/>
<i class="fas fa-truck" data-toggle="tooltip" title="Shipping" data-placement="left"></i>
</div>
</form>
<button id="calc" onclick="calculate()">Calculate</button>
</div>
<p id="result"></p>
</div>
</body>
</html>
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;
}
so im coding up this pizza site and ive got a problem - i wanted to put the place's logo in the navbar (which is also a link to main page) but i cannot get it to be displayed. im using twitter bootstrap. here's the code:
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
jsfiddle
Hi now you just define to margin-right:20px; in your li as like htis
.nav-pills>li+li {
margin-right: 20px;
}
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please do refer the css code and also do check the image path is correct..
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
background-repeat: no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
background-size: contain;
background-position: center center;
}
I have just add my website logo and it's working fine. Have a look
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://www.dezaro.com/siteimg/logo.png') ;
background-repeat:no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span,
a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover {
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html">
<div id="logo"></div>
</a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li>
<a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>