I'm trying to create a hover state for my a element in the navigation bar, the problem is the hover color want cover the whole height of the nav.
I tried solving this using padding on the a element, but it doesn't look like a correct way, because I keep changing values until I got the right one.
body,
html {
margin: 0;
padding: 0;
}
nav {
background: black;
}
.container {
padding: 0px;
margin: 0px;
list-style: none;
color: white;
font-weight: bold;
font-size: 1.8rem;
text-transform: capitalize;
display: flex;
}
.search {
flex: 1;
}
.search .search-input {
width: 100%;
font-size: 1.8rem;
text-transform: capitalize;
}
.container a {
text-decoration: none;
color: white;
padding: 0 10px 6px 10px; /*this what I use to fix it */
}
.container a:hover {
text-decoration: none;
color: white;
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<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>
</head>
<body>
<nav>
<ul class="container">
<li>home</li>
<li>profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="search">
</li>
<li>logout</li>
</ul>
</nav>
</body>
</html>
a tags by default are an inline element, give then the styles display: block; and height: 100% to take up the full space of their parents. Snippet:
body,
html {
margin: 0;
padding: 0;
}
nav {
background: black;
}
.container {
padding: 0px;
margin: 0px;
list-style: none;
color: white;
font-weight: bold;
font-size: 1.8rem;
text-transform: capitalize;
display: flex;
}
.search {
flex: 1;
}
.search .search-input {
width: 100%;
font-size: 1.8rem;
text-transform: capitalize;
}
.container a {
text-decoration: none;
color: white;
display: block;
height: 100%;
}
.container a:hover {
text-decoration: none;
color: white;
background: red;
}
<nav>
<ul class="container">
<li>home</li>
<li>profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="search">
</li>
<li>logout</li>
</ul>
</nav>
Related
How can I shift my logo to top left side in the header bar?
I tried most of the time but code is not executed. My HTML code and CSS code is below:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap');
/* Selector ke bare me aache se padh lo
*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* navbar styling */
.navbar {
position: fixed;
width: 100%;
padding: 30px, 0;
background-color: none;
font-family: 'Ubuntu', 'sans-serif';
}
.navbar.sticky {
padding: 30px, 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
align-items: left;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo {
/* text-align:left; // want this logo to the top left side but this is not happning */
padding-top: 30px;
}
.navbar .logo a span {
color: crimson;
}
.navbar .menu li {
padding-top: 18px;
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500px;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
/* home section styleing */
.home {
display: flex;
background-size: cover;
background-attachment: fixed;
background-image: url(/banner.jpg);
background-repeat: no-repeat;
background-position: center;
height: 100vh;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', 'sans-serif';
}
.home .max-width {
margin: auto 0. auto 40px;
margin-left: -3px;
}
.text-1 {
font-size: 27px;
}
.text-2 {
font-size: 75px;
font-weight: 600;
}
.text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .text-3 span {
color: crimson;
font-weight: 500;
}
<!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 Website</title>
<link rel="stylesheet" href="website.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo"> Portfo<span>lio.</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact me</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home">
<div class="max-width">
<div class="home-content"></div>
<div class="text-1">Hello ji, My name is</div>
<div class="text-2">Baljit Singh</div>
<div class="text-3">And I'm a <span>Engineer</span> </div>
</div>
</section>
<p style="text-align: center; padding: 8px ; font-size: larger; ">This website is in under construction</p>
<!-- <script src="website.js"></script> -->
</body>
</html>
Your logo is already on the left side. Probably you are not seeing it properly because of your background color. I have changed your background to black. Now you see.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
background : black;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* navbar styling */
.navbar {
position: fixed;
width: 100%;
padding: 30px, 0;
background-color: black;
font-family: 'Ubuntu', 'sans-serif';
}
.navbar.sticky {
padding: 30px, 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
align-items: left;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo {
/* text-align:left; // want this logo to the top left side but this is not happning */
padding-top: 30px;
}
.navbar .logo a span {
color: crimson;
}
.navbar .menu li {
padding-top: 18px;
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: #fff;
font-size: 18px;
font-weight: 500px;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: crimson;
}
/* home section styleing */
.home {
display: flex;
background-size: cover;
background-attachment: fixed;
background-image: url(/banner.jpg);
background-repeat: no-repeat;
background-position: center;
height: 100vh;
color: #fff;
min-height: 500px;
font-family: 'Ubuntu', 'sans-serif';
}
.home .max-width {
margin: auto 0. auto 40px;
margin-left: -3px;
}
.text-1 {
font-size: 27px;
}
.text-2 {
font-size: 75px;
font-weight: 600;
}
.text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .text-3 span {
color: crimson;
font-weight: 500;
}
<!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 Website</title>
<link rel="stylesheet" href="website.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">
Portfo<span>lio.</span>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contact me</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home">
<div class="max-width">
<div class="home-content"></div>
<div class="text-1">Hello ji, My name is</div>
<div class="text-2">Baljit Singh</div>
<div class="text-3">And I'm a <span>Engineer</span> </div>
</div>
</section>
<p style="text-align: center; padding: 8px ; font-size: larger; ">This website is in under construction</p>
</body>
</html>
Hey i am trying to make a navbar again and I have declared that the anchor tag have display block but white space appear
Here isy HTML code=
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="css.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="css.js"></script>
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<span class="menu-btn">
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
</span>
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
</html>
And this is CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn, label{
display: none;
}
#media(min-width: 600px){
.nav-links a {
color: white;
}
.nav-links{
float: right;
justify-content: space-between;
}
.nav-links a:hover{
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
nav {
/*display: flex;*/
}
.title, .nav-links{
display: inline;
}
}
#media(max-width: 599px){
label {
display: inline;
float: right;
}
.extra{
display: none;
}
.nav-links{
text-align: center;
display: block;
}
.nav-links a {
display: block;
}
}
And the white space is only appear in mobile devices so please help me i need it fast⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
You have a padding-right on nav section
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
make padding-right: 0; for smaller screen.
#media(max-width: 599px){
nav{
padding-right: 0px;
}
}
I'm new to css/html and I still don't know how to center the text when hovering. So I have a project on my subject to create a simple website. And so far I'm starting with the header. I'm having this one problem where I can't center the text everytime i hover my mouse to the menus. Here is the image and my code.
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 100px;
display: block;
padding: 10px 70px;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
Help please : (
so many issues, and no need for such things, as long as u set one you dun have to set other, anyway I have just set the fix on the same code, you have to use li a or nav a, as long as they both are doing the same in your case, so I removed one of them both and you set padding-left: 70px, which I removed and added to the width of the buttons
check the snippet
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: monospace;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
box-sizing: border-box;
}
#font-face {
font-family: 'crimson';
src: url(fonts/Crimson-Bold.ttf);
font-style: normal;
font-weight: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
}
nav{
width: 100%;
height: 100px;
background: #7B241C;
overflow: auto;
}
ul{
padding: 0;
margin: 0 0 0 150px;
list-style: none;
}
li {
float: left;
}
.logo img{
position: absolute;
top: -40px;
left:-60px;
}
li a{
margin-top: 30px;
margin-left: 100px;
}
nav a{
width: 170px;
display: block;
padding: 10px 0;
text-decoration: none;
font-family: crimson;
color: white;
text-align: center;
}
nav a:hover {
background: #CD6155;
transition: .5s;
border-radius: 10px;
font-size: 20px;
padding: 0 50;
text-align: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pinoy Putahe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="logo"><img src="logofinal.png" width="320" height="180"></div>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>dishes</li>
</ul>
</nav>
</header>
</body>
</html>
This question already has answers here:
Content overlapping with "position:fixed"
(1 answer)
How can I make content appear beneath a fixed DIV element?
(13 answers)
Closed 2 years ago.
Here is the code:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
The goal I am trying to achieve is having the text from the section tag and have it directly below my fixed navbar. I have attempted to put a z-index with the values of above 1 into header, nav and #nav-list, but it has not worked. What can be re-configured to make this work? I am sorry. I have tried all I know and searched this site but to no success.
I would just add a margin-top equivalent to the nav offsetHeight, which in this case is 106 pixels.
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section{
margin-top:106px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
If you have a responsive navigation bar you could use JS to dynamically set the margin top.
document.getElementsByTagName("section")[0].style.marginTop = document.getElementsByTagName("nav")[0].offsetHeight+"px";
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
position: fixed; and position: absolute; puts the header out of the normal flow. use position: sticky; instead:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: sticky;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
Alternatively, you can use a top-margin at the section:
body {
margin: 0;
padding: 0;
}
/* NAVIGATION */
nav {
background: #222222;
padding: 10px 40px 10px 70px;
color: #ffffff;
}
header {
position: fixed;
width: 100%;
top: 0;
}
#nav-list {
display: flex;
list-style: none;
justify-content: space-around;
align-items: center;
padding-left: 0;
}
#search {
height: 40px;
width: 240px;
display: flex;
border-radius: 5px;
}
#searchBar {
height: 100%;
width: 200px;
border: none;
border-radius: 5px 0 0 5px;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
}
#search #searchButton {
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border-radius: 0 5px 5px 0;
cursor: pointer;
background-color: rgb(81, 22, 219);
color: #222222;
transition: color 0.75s;
}
#search #searchButton:hover {
color: #fff;
}
#page-title {
font-size: 24px;
}
/* MAIN CONTENT */
#content {
/* test to see if the color will appear */
background: blue;
}
section {
margin-top: 90px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Vault</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<nav>
<ul id="nav-list">
<li id="search">
<input id="searchBar" type="search" placeholder="Search...">
<label id="searchButton">
<i class="fas fa-search"></i>
</label>
</li>
<li id="page-title">Video Vault</li>
</ul>
</nav>
</header>
<section>
test
</section>
</body>
</html>
This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 2 years ago.
I am creating a web page with a navigation bar which has some menu.
i want to show a border on menu items border when i mouse over them. i have created this but when i am hovering on them they appear with a border and making an effect on the text also. How can I remove the effect from the text ?
body{
font-family: 'Montserrat', sans-serif;
}
*{
margin:auto;
padding:0px;
}
.header{
background-color:#0D1422;
color:white;
width:100%;
height:auto;
padding:10px;
overflow:hidden;
}
.header .logo{
width: auto;
margin: 37px 100px;
color:white;
font-size:50px;
font-weight:800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #F5A425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight:600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover{
border:1px solid #f5a523;
transition:.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grad school project</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1> <span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li> home</li>
<li> about-us</li>
<li> courses</li>
<li> contact</li>
<li> extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
The way I would solve this is by setting the border color to transparent while keeping the same width as when the element is hovered.
body {
font-family: "Montserrat", sans-serif;
}
* {
margin: auto;
padding: 0px;
}
.header {
background-color: #0d1422;
color: white;
width: 100%;
height: auto;
padding: 10px;
overflow: hidden;
}
.header .logo {
width: auto;
margin: 37px 100px;
color: white;
font-size: 50px;
font-weight: 800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #f5a425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight: 600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
border: 1px solid transparent;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover {
border: 1px solid #f5a523;
transition: 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grad school project</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1><span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li>home</li>
<li>about-us</li>
<li>courses</li>
<li>contact</li>
<li>extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I've added a transparent border to the original items and gave it the color on hover and I moved your transition to the not hovered selector as that is where it should be.
body {
font-family: 'Montserrat', sans-serif;
}
* {
margin: auto;
padding: 0px;
}
.header {
background-color: #0d1422;
color: white;
width: 100%;
height: auto;
padding: 10px;
overflow: hidden;
}
.header .logo {
width: auto;
margin: 37px 100px;
color: white;
font-size: 50px;
font-weight: 800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #f5a425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight: 600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
transition: 0.5s;
border: 1px solid transparent;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover {
border: 1px solid #f5a523;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>grad school project</title>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1><span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li>home</li>
<li>about-us</li>
<li>courses</li>
<li>contact</li>
<li>extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I'm not quite sure what you're trying to do, I assume you do want a border when hovering over but you don't want the items to jump around you could ad a display:flex to your menu-bar items with a flex-direction of column to put them in the same order again
body{
font-family: 'Montserrat', sans-serif;
}
*{
margin:auto;
padding:0px;
}
.header{
background-color:#0D1422;
color:white;
width:100%;
height:auto;
padding:10px;
overflow:hidden;
}
.header .logo{
width: auto;
margin: 37px 100px;
color:white;
font-size:50px;
font-weight:800;
overflow: hidden;
float: left;
text-transform: uppercase;
}
span {
color: #F5A425;
}
.menu-bar {
float: right;
overflow: hidden;
}
.menu-bar ul {
display:flex;
flex-direction:column;
text-transform: uppercase;
list-style-type: none;
padding: 27px;
font-size: 53px;
font-weight:600;
color: white;
}
li {
list-style-type: none;
float: left;
padding: 40px;
color: white;
}
a {
color: white;
text-decoration: none;
font-size: 57px;
font-weight: 800;
}
.menu-bar {
float: right;
margin: auto 140px;
}
li:hover{
border:1px solid #f5a523;
transition:.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grad school project</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="header">
<div class="logo">
<h1> <span>Grad</span> school</h1>
</div>
<div class="menu-bar">
<ul>
<li> home</li>
<li> about-us</li>
<li> courses</li>
<li> contact</li>
<li> extarnal</li>
</ul>
</div>
</div>
</header>
</body>
</html>