How to make the navbar into a fixed or sticky position using media query? I want to make it visible when you scroll down the scroll bar of your page. I tried anything I could but I don't really get it.
Here are my examples of codes.
.navbar {
background-color: #111;
padding: 12px 16px;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
/* MEDIA QUERY */
HERE
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!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>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>
You can make a navbar sticky or fixed by using the CSS position property. Set position property as "sticky" or "fixed".
See the snippet below. You can add it to any view port according to your need I have added it for larger screens.
body {
height: 800px;
background: cyan;
}
.navbar {
background-color: #111;
padding: 12px 16px;
position: sticky;
top: 0;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
#media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!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>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Skills</li>
<li>Services</li>
<li>Certificates</li>
</ul>
</div>
</body>
</html>
Related
Hello I am attempting to create a Portfolio using HTML, CSS, and Javascript. My only previous experience is making a basic website with standard text and a light\dark theme button. I am trying to get my Title the be on the left of my navigation bar, and my directories to be on the left side of the navigation bar. Could Someone explain how i would do this.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .maxwidth{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
You were doing it pretty much correctly. Your css had a typo. I changed maxwidth to max-width.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
/* navbar styling */
.navbar{
position: fixed;
width: 100%;
background: crimson;
font-family: 'Ubuntu', sans-serif;
}
.navbar .max-width{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .menu li{
list-style: none;
display: inline-block;
}
.navbar .menu li a{
color: #fff;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href='#'>Portfo<span>lio.</span></a></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
How Do I get an image in line with the Navigation bar on the left side and the menu items listed on the right side? I keep getting my image to go on top of the navigation bar instead of being inline/on the navigation bar.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Our first page">
<meta name="keywords" content="html tutorial template">
</head>
<body>
<nav>
<ul class="navigationbar">
<li><img src="imgs/tlclogo.png" id=logo alt="TLC Logo" /> </li>
<li>Home</li>
<li>Music</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
.navigationbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
text-align: center;
float: left;
vertical-align:top;
top: 0;
width: 100%;
overflow: hidden;
background-color: #333
}
#logo {
float: left;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Try using display:flex; this will make your life a lot easier. Also put img tag outside un-ordered list for HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TLC Music Group</title>
<link rel="stylesheet" href="css/style.css" />
<meta name="description" content="Our first page" />
<meta name="keywords" content="html tutorial template" />
</head>
<body>
<nav>
<img src="imgs/tlclogo.png" id=logo alt="TLC Logo" />
<ul class="navigationbar">
<li>Home</li>
<li>Music</li>
<li>News</li>
</ul>
</nav>
</body>
</html>
and for CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
ul li {
position: relative;
margin: 0 20px;
list-style: none;
display: inline-block;
cursor: pointer;
}
I hope this will resolve your issue.
I reset the margins of all the elements, but there is a gap in between, which I don't know why.
I tried it in chrome and firefox browsers. Same result in both. I'm waiting for your help. This is really important
enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
#menu li {
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
For the purpose of inline-block displayed elements, whitespace is treated as, well, whitespace. It's the spaces within your code. It would be easier if you were use #menu{ display: flex; } instead of making li into inline-blocks.
i will fix it for you
<!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">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
}
ul {
font-size: 0;
}
#menu li {
font-size: 16px;
display: inline-block;
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
color: white;
}
There are several ways you could get round this - probably the most inelegant would be to remove the newlines/spaces in your HTML list.
More practical probably is to have the ul display: flex. But you will have to consider what you want to happen responsive-wise. Do you ever need the elements to flow to the next line on a small device?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#nav {
padding: 20px;
}
#menu{
list-style-type: none;
display: flex;
}
#menu li {
min-width: 140px;
padding: 15px;
text-align: center;
background-color: rgb(48, 48, 48);
}
#menu li a{
text-decoration: none;
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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Courses</li>
<li>Contact</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 2 years ago.
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
}
a:hover {
transform: translate(50px,100px);
}
<!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>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
I added the transition to my Navbar links to respond when hovered but the transition is not working . I want the links to translate when hovered and therefore I used transform: translate(50px,100px); but apparently it is not working. Don't know why
Add display: block; to the links.
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
display: block;
}
a:hover {
transform: translate(50px,100px);
}
<!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>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Edit: You can refer to this.
The solution would be to add a display property to the links
a {
text-decoration: none;
color: white;
transition: 1s;
display: block;
}
The transform translate property will work with block level elements like a div for example.
Your "a" element is included into a "li" element, so you would probably have to focus on transforming the "li" not the "a". In css it is always important to consider that each element(tag or box) is always included into another one. So the key is to identify which one to modify and how much space is available.
You can try something like below:
body {
font-family: sans-serif;
font-size: 25px;
}
.navbar {
width: 100%;
height: auto;
background-color: rgb(97, 77, 47);
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
li {
padding: 10px 25px;
}
a {
text-decoration: none;
color: white;
transition: 1s;
}
li:hover {
background-color: red;
transform: translate(50px,100px);
}
<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>Document</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
I am building my own portfolio/company site and my code is below I try to make it full width but it does not go full width. I am writing the code in html5 and css3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TECH-EXPERTS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Our Work</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
</html>
nav{
background-color: black;
border-radius: 5px;
display: block;
overflow: hidden;
width: 90%;
}
nav ul {
margin: 0;
padding: 0;
float: right;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: red;
display: block;
line-height: 56px;
padding: 0 24px;
text-decoration: none;
}
nav a:hover{
color: blue;
}
First off, assuming that you want the navbar to span the entire width of the window, you need make sure that you're removing the default margin that is placed on the body element (if you are not using a css reset of some kind that already takes care of that).
Try:
body {
margin: 0;
}
Now remove the width: 90%; that's on your navbar. That should get you pointed in the right direction.
Here's a Codepen of that in action.