I'm trying to make a Responsive header with HTML and CSS.
But there are two problems which I can't solve.
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
body {
margin: 0;
font-family: Source Sans Pro;
}
a {
text-decoration: none;
color: white;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #263343;
padding: 8px 12px;
}
.navbar__logo {
font-size: 24px;
color: white;
}
.navbar__logo i {
color: #d49466;
}
.navbar__menu {
display: flex;
list-style: none;
padding-left: 0;
}
.navbar__menu li {
padding: 8px 12px;
}
.navbar__menu li:hover {
background-color: #d49466;
border-radius: 4px;
}
.navbar__icons {
list-style: none;
color: white;
display: flex;
padding-left: 0;
}
.navbar__icons li {
padding: 8px 12px;
}
.navbar__toggleBtn {
display: none;
position: absolute;
right: 32px;
font-size: 24px;
color: #d49466;
}
#media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
align-items: flex-start;
padding: 8px 24px;
}
.navbar__menu {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
}
.navbar__menu li {
width: 100%;
text-align: center;
}
.navbar__icons {
display: none;
justify-content: center;
width: 100%;
}
.navbar__toggleBtn {
display: block;
}
.navbar__menu.active,
.navbar__icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<script src="main.js" defer></script>
<title>Nav Bar</title>
</head>
<body>
<nav class="navbar">
<div class="navbar__logo">
<i class="fa-solid fa-brain-circuit"></i>
Macro
</div>
<ul class="navbar__menu">
<li>Home</li>
<li>Information</li>
<li>Supply</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
<ul class="navbar_icons">
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
</ul>
<a href="#" class="navbar__toggleBtn">
<i class="fas fa-bars"></i>
</a>
</nav>
</body>
</html>
And these are the problem.
I want to show my social icons but they don't show up.
Social icons don't disappear when the page shrinks.
I tried to add the below code in my style.css.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
But nothing changed. I have no idea how to fix them. How can I solve it?
You are using fontawesome v6 code with a v5 css.
In v5, the code should look like this:
<i class="fab fa-instagram"></i>
Remember to select v5 when you search for the icons.
Related
I'm trying to build a blog web page in a HTML CSS tutorial and I can't find a way to make the navBar identical.
Here's the Navigation Bar:
I don't know how to separate the logo on the left to the group of icons on the right.
I tried to use Flex but I can't figure out how to use it properly.
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
If you have any advice or suggestions it would be great I'm starting and this is making me struggle a lot.
Thanks in advance guys!
You just have to use display: flex; align-items: center; with header style which will look like
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
and also need to add CSS in Nav style, which will look like
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
Complete code
header img{
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
header nav{
margin-left: auto;
display: flex;
align-items: center;
}
body{
background-color: aliceblue;
}
header * {
display: inline;
}
header li{
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
<!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>My blog</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<header>
<img src="https://assets.hongkiat.com/uploads/psd-text-svg/logo-example.jpg" alt="">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li><div id="circle"></div></li>
</ul>
</nav>
</header>
</body>
</html>
You can use display: flex on the header (vertical alignment via align-items as desired), and to move the logo and the navigation to the left and right, just add margin-left: auto to nav to move it as far right as its contents allow.
(margin-right: auto for the logo would accomplish the same result, BTW)
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
nav {
margin-left: auto;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
You can do it with Flex, give your main div the display: flex and justify-content: space-between so there will be a space between your logo and other nav-items and then align-items: center so every item will be in the same horizontally aligned.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<header>
<img src="C:\Users\elios\OneDrive\Documents\HTML_classes\My_blog_project\logo.png" alt="(logo)">
<nav>
<ul>
<li><i class="material-icons">search</i></li>
<li><i class="material-icons">list</i></li>
<li><i class="material-icons">notifications</i></li>
<li><button>Upgrade</button></li>
<li>
<a href="">
<div id="circle"></div>
</a>
</li>
</ul>
</nav>
</header>
Css
header img {
height: 40px;
margin-left: 40px;
}
header {
background-color: white;
display: flex;
justify-content: space-between;
align-items: center
}
body {
background-color: aliceblue;
}
header * {
display: inline;
}
header li {
justify-content: center;
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}
Whenever I am testing with google chrome's dev tools for responsiveness, and when I am selecting Galaxy fold device or when I am shrinking the screen width via chrome dev tools , when the size goes below 300 x 655, the background of the header collapses. How to make it 100% width in all screen size?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>MrSrv7</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
Contact
</li>
<li>
Testimonials
</li>
</ul>
</nav>
</header>
</body>
</html>
You need add: width=device-width in tag
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #202063;
color: gainsboro;
ul {
li {
list-style-type: none;
cursor: pointer;
}
}
a {
text-decoration: none;
color: inherit;
}
main,
header {
padding: 20px;
}
}
header {
display: flex;
background-color: #fff;
color: #202063;
font-weight: bold;
justify-content: space-between;
nav {
ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
li {
margin: 0 10px;
}
li:hover {
border-bottom: 2px solid rgb(255, 255, 255);
padding-bottom: 4px;
}
}
}
}
.text_center {
text-align: center !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h4 id="brand_text" class="text_center">MrSrv7</h4>
<nav>
<ul id="navlinks">
<li>
<a href="#about">
About
</a>
</li>
<li>
Contact
</li>
<li>
Testimonials
</li>
</ul>
</nav>
</header>
</body>
</html>
Have you tried setting the min-width to 100%? I'm not sure what your nav bar looks like currently.
header{
min-width:100%
}
I am trying to push my navbar up and align my navbar up to the label which is supposed to be the logo but I don't know how I can do that ...any help would be appreciated...here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana;
}
html, body {
height: 100%;
}
.container1 {
min-height: 100%;
}
.main {
overflow: auto;
padding-bottom: 50px;
}
div.footer>a {
text-decoration: none;
color: red;
}
div.footer {
background-color: black;
color: white;
position: relative;
height: 50px;
margin-top: -50px;
clear: both;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li a {
text-decoration: none;
background-color: black;
color: white;
font-size: 17px;
margin: 20px;
}
nav ul li {
list-style: none;
}
nav ul.navbar {
display: flex;
justify-content: center;
}
<!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>Home</title>
<link rel='stylesheet' href='../Css/styles.css' </head>
<body>
<nav>
<span><label id='logo'>Logo</label></span>
<ul class='navbar'>
<li><a href='#' class='active'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
<div class='container1'>
<div class='main'>
</div>
</div>
<div class='footer'>
Created by <a href='https://www.youtube.com/channel/UCLJQcARXQmADJADQO3ZZqfQ?
view_as=subscriber' target='_blank'>Precious Nyaupane</a>|© 2020 All rights reserved
</div>
</body>
</html>
Displaying nav as flex should do the trick
nav {
display: flex;
}
Demo
i'm learning to build from scratch a website so i can learn properly how to build a nice website however i start with the navbar but its not responsive even using flexbox , would you like to appoint me to the right direction , i'm using media query however i didnt get it right
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 10vh;
background-color: aqua;
margin: 0;
padding: 0;
}
.logo {
list-style-type: none;
display: flex;
flex-wrap: wrap
}
.first {
list-style-type: none;
margin-right: 30rem;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.second {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.first li {
padding-left: 2rem;
}
.first li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.first li:hover {}
.second li {
padding-left: 2rem;
}
nav ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
#media all and (max-width: 500px) {
nav {
flex-direction: column;
}
}
<!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">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<ul class="logo">
<li> brand</li>
</ul>
<ul class="first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
The main thing here - you want to make sure and set flex-direction: row for desktop. I also set the height of nav to auto and the width to 100vw, mostly for the purposes of the code demo. For some reason the code demo doesn't look correct in the preview window, but appears correctly in full screen.
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-around;
width: 100vw;
height: auto;
background-color: aqua;
margin: 0;
padding: 0;
}
.logo {
list-style-type: none;
display: flex;
}
.first {
list-style-type: none;
margin-right: 30rem;
padding: 0;
display: flex;
}
.second {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.first li {
padding-left: 2rem;
}
.first li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.first li:hover {}
.second li {
padding-left: 2rem;
}
nav ul li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
#media all and (max-width: 500px) {
nav {
flex-direction: column;
}
}
<!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">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<ul class="logo">
<li> brand</li>
</ul>
<ul class="first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
Make you styles 'mobile first'
html, body, nav {
margin: 0;
padding: 0;
}
nav {
position: fixed;
top: 0;
width: 100%;
background-color: aqua;
}
ul, li, a{
color: #000;
list-style-type: none;
text-decoration: none;
text-transform: uppercase;
}
a:hover {
color: white;
}
.row {
display: block;
}
#media all and (min-width: 500px) {
.row {
display: flex;
}
.col {
flex: 1;
}
}
<!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">
<link rel="stylesheet" href="/css/style.css">
<title>Document</title>
</head>
<body>
<nav class="row">
<ul class="col logo">
<li> brand</li>
</ul>
<ul class="col first">
<li> our products</li>
<li> Title2</li>
<li> Title3</li>
</ul>
<ul class="col second">
<li> En</li>
<li> Login in</li>
</ul>
</nav>
</body>
</html>
for the style you don't need to use a media query you can build all your menu using flexbox,i can propose this code for CSS and use your same HTML file
* {
margin: 0;
padding: 0;
}
nav {
display: flex;
width: 100%;
background-color: aqua;
flex-wrap: wrap;
justify-content: space-between;
}
li {
list-style-type: none;
padding: 20px 25px
}
ul {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin: auto
}
.first li a {
display: block;
color: #000;
text-decoration: none;
}
nav ul li a {
color: #000;
padding: 8px 16px;
text-decoration: none;
text-transform: uppercase;
}
Having trouble making the nav bar responsive. Due to the desired design I used two ul's with an image in between. This causes the breakpoints to happen at a large size because of the li padding. I would like to move the logo to the left and add a dropdown button to display the navbar options, along with removing the topbar at a mobile display width. Any help would be much appreciated, Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
GIVE $10, GET $10
FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li>BOB'S CREAM</li>
<li>SCALISI SKINCARE</li>
<li>TINTED</li>
</ul>
<img src="assets/logo.PNG" alt="SCALISI">
<ul class="secondNavSection">
<li>REVIEW</li>
<li>ABOUT</li>
<li>BLOG</li>
<li><i class="fa fa-search fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
Maybe you should follow the Bootstrap's boilerplate and don't forget to add it's resources.