I've got a question. I was trying to code a navbar. It's working perfectly except for the fact that over the navbar there is a big space. So that the navbar is in the middle of the page. I've got no clue what the mistake could be. If u got an idea of what the problem could be and how to solve it, I Would be very pleased. Otherwise, I would be happy to get improvement tips for my code.
.navbar {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
top: 20%;
width: 100%;
height: 70px;
background-color: black;
-webkit-box-shadow: 0 0 10px var(--shadow);
box-shadow: 0 0 10px var(--shadow);
color: white;
margin-top: 2px;
}
.navbar-nav {
width: 40%;
height: 100%;
padding: 0 7%;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
list-style: none;
}
.navbar-nav .nav-item {
text-align: center;
}
.navbar-nav .nav-item .item-link {
position: relative;
width: 100%;
padding: 15px 20px;
color: var(--white-smoke);
text-decoration: none;
border-radius: 5px;
border: 1px solid #0e0e0e00;
}
.navbar-nav .nav-item .item-link:hover {
background-color: var(--shadow);
border: 1px solid #4e4e4e4d;
}
.navbar-nav .c:hover #drop-down {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar-nav .c:focus-within #drop-down {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar-nav .c #drop-down {
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
top: 60px;
background-color: var(--white-smoke);
padding: 30px 0;
border-radius: 5px;
text-align: left;
-webkit-box-shadow: 0 0 10px var(--shadow);
box-shadow: 0 0 10px var(--shadow);
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.navbar-nav .c #drop-down .clinks {
display: block;
color: #000;
padding: 5px 0;
text-decoration: none;
padding: 10px 50px 10px 20px;
}
.navbar-nav .c #drop-down .clinks i {
padding: 0 2px;
}
.navbar-nav .c #drop-down .clinks:hover {
background-color: var(--shadow);
}
#media screen and (max-width: 1000px) {
.navbar #brand {
display: none;
}
.navbar .navbar-nav {
width: 100%;
}
}
<!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="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>DropDown Menu</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<!-- Home -->
<li class="nav-item h">Home
</li>
<!-- Categories -->
<li class="nav-item c">
<a href="#" class="item-link">
<i class="fa fa-angle-down" aria-hidden="true"></i> Investieren</a>
<!-- Dropdown Menu -->
<div id="drop-down">
<a href="#" class="clinks"> <i class="fa fa-code" aria-hidden="true"></i> Web Development
</a>
<a href="#" class="clinks"> <i class="fa fa-android" aria-hidden="true"></i> Mobile Apps
</a>
<a href="#" class="clinks"> <i class="fa fa-adjust" aria-hidden="true"></i> UI / UX
</a>
<a href="#" class="clinks"> <i class="fa fa-database" aria-hidden="true"></i> Database
</a>
<a href="#" class="clinks"> <i class="fa fa-gamepad" aria-hidden="true"></i> Game Development
</a>
</div>
</li>
<!-- Prices -->
<li class="nav-item p">Prices
</li>
<!-- About -->
<li class="nav-item a">About
</li>
</ul>
</nav>
</body>
</html>
Because you have top: 20%; on your .navbar with fixed positioning. You also have margin-top: 2px on your navbar. Remove that and you should be good.
.navbar {
position: fixed;
/*top: 20%;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
height: 70px;
background-color: black;
-webkit-box-shadow: 0 0 10px var(--shadow);
box-shadow: 0 0 10px var(--shadow);
color: white;
/*margin-top: 2px;*/
}
body {
margin: 0;
}
.navbar-nav {
width: 40%;
height: 100%;
padding: 0 7%;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
list-style: none;
}
.navbar-nav .nav-item {
text-align: center;
}
.navbar-nav .nav-item .item-link {
position: relative;
width: 100%;
padding: 15px 20px;
color: var(--white-smoke);
text-decoration: none;
border-radius: 5px;
border: 1px solid #0e0e0e00;
}
.navbar-nav .nav-item .item-link:hover {
background-color: var(--shadow);
border: 1px solid #4e4e4e4d;
}
.navbar-nav .c:hover #drop-down {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar-nav .c:focus-within #drop-down {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.navbar-nav .c #drop-down {
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
top: 60px;
background-color: var(--white-smoke);
padding: 30px 0;
border-radius: 5px;
text-align: left;
-webkit-box-shadow: 0 0 10px var(--shadow);
box-shadow: 0 0 10px var(--shadow);
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.navbar-nav .c #drop-down .clinks {
display: block;
color: #000;
padding: 5px 0;
text-decoration: none;
padding: 10px 50px 10px 20px;
}
.navbar-nav .c #drop-down .clinks i {
padding: 0 2px;
}
.navbar-nav .c #drop-down .clinks:hover {
background-color: var(--shadow);
}
#media screen and (max-width: 1000px) {
.navbar #brand {
display: none;
}
.navbar .navbar-nav {
width: 100%;
}
}
<!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="css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>DropDown Menu</title>
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<!-- Home -->
<li class="nav-item h">Home
</li>
<!-- Categories -->
<li class="nav-item c">
<a href="#" class="item-link">
<i class="fa fa-angle-down" aria-hidden="true"></i> Investieren</a>
<!-- Dropdown Menu -->
<div id="drop-down">
<a href="#" class="clinks"> <i class="fa fa-code" aria-hidden="true"></i> Web Development
</a>
<a href="#" class="clinks"> <i class="fa fa-android" aria-hidden="true"></i> Mobile Apps
</a>
<a href="#" class="clinks"> <i class="fa fa-adjust" aria-hidden="true"></i> UI / UX
</a>
<a href="#" class="clinks"> <i class="fa fa-database" aria-hidden="true"></i> Database
</a>
<a href="#" class="clinks"> <i class="fa fa-gamepad" aria-hidden="true"></i> Game Development
</a>
</div>
</li>
<!-- Prices -->
<li class="nav-item p">Prices
</li>
<!-- About -->
<li class="nav-item a">About
</li>
</ul>
</nav>
</body>
</html>
It's because you have the navbar set to a fixed position with a top of 20%.
.navbar {
position: fixed; //this will make sure the navbar always stays in its position
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
top: 20%; //this is what is causing the "space" above
width: 100%;
height: 70px;
background-color: black;
-webkit-box-shadow: 0 0 10px var(--shadow);
box-shadow: 0 0 10px var(--shadow);
color:white;
margin-top:2px;
}
You're telling the navbar to go down 20% of the page with the top:20%. If you don't want the space, just remove the top: 20% and you should be fine.
The issue is you have the navbar set to top: 20%;. You need to set it the fixed position to top 0%:
.navbar {
top: 0%;
left: 0%;
right: 0%;
}
Related
I am new to HTML CSS, can anyone tell me what am I doing wrong?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--pink: #ff6161;
--white: #fff;
--black: #292828;
--font: "Roboto", sans-serif;
}
header {
min-height: 100px;
max-width: 100%;
background-color: var(--pink);
display: flex;
justify-content: center;
align-items: center;
}
.menu {
max-width: 10rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-items {
list-style-type: none;
padding-right: 30px;
font-family: var(--font);
font-size: 20px;
}
.menu-items a {
text-decoration: none;
color: var(--black);
}
.search-bar {
width: 700px;
}
.inp {
width: 100%;
height: 2rem;
}
<header>
<div class="search-bar">
<input class="inp" type="text" />
</div>
<ul class="menu">
<i class="fa-solid fa-house"></i>
<li class="menu-items"> Home</li>
<i class="fa-solid fa-store"></i>
<li class="menu-items">Store</li>
<i class="fa-solid fa-headset"></i>
<li class="menu-items">Support</li>
</ul>
</header>
It's because you're using align items: center and justify-content: center in your header at the same time.
You're basically forcing items inside header to move to the center.
In your CSS, when you are modifying the header, you are putting all elements inside of it in the same position.
Something you could to fix this is, give the header a relative position, and then manipulate each element inside the header individually.
Change your display for menu to contents:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--pink: #ff6161;
--white: #fff;
--black: #292828;
--font: "Roboto", sans-serif;
}
header {
min-height: 100px;
max-width: 100%;
background-color: var(--pink);
display: flex;
justify-content: center;
align-items: center;
}
.menu {
max-width: 10rem;
display: contents;
justify-content: center;
align-items: center;
}
.menu-items {
list-style-type: none;
padding-right: 30px;
font-family: var(--font);
font-size: 20px;
}
.menu-items a {
text-decoration: none;
color: var(--black);
}
.search-bar {
width: 700px;
}
.inp {
width: 100%;
height: 2rem;
}
<header>
<div class="search-bar">
<input class="inp" type="text" />
</div>
<ul class="menu">
<i class="fa-solid fa-house"></i>
<li class="menu-items"> Home</li>
<i class="fa-solid fa-store"></i>
<li class="menu-items">Store</li>
<i class="fa-solid fa-headset"></i>
<li class="menu-items">Support</li>
</ul>
</header>
The sum of the text widths of the menu Home Store Support will be greater than max-width: 10rem;
.menu {
display: flex;
justify-content: center;
align-items: center;
}
This question already has answers here:
How can I make box-shadow appear above a div?
(3 answers)
Closed 1 year ago.
I am a beginner and I am currently learning HTML and CSS. Now I am trying to create a webpage. In my html I have added a box shadow in the header tag. But when I am adding a div tag next to the header tag the box shadow is disappearing. Why is this happening?
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
text-decoration: none;
list-style: none;
}
header {
height: 101px;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 0 40px;
}
header .logo {
margin-right: 4rem;
}
header .logo img {
width: 51px;
}
header .nav-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
font-weight: 700;
}
header .nav-bar a {
color: #000;
}
header .nav-bar a:hover {
color: #008248;
}
header .nav-bar .nav-1 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
letter-spacing: 0.1em;
}
header .nav-bar .nav-1 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: uppercase;
}
header .nav-bar .nav-1 ul li {
margin-right: 24px;
}
header .nav-bar .nav-2 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
header .nav-bar .nav-2 ul li {
margin-left: 24px;
}
header .nav-bar .nav-2 ul .btn, header .nav-bar .nav-2 ul .btn-black {
padding: 7px 16px;
border: 1px solid #000;
font-size: 14px;
border-radius: 30px;
}
header .nav-bar .nav-2 ul .btn:hover, header .nav-bar .nav-2 ul .btn-black:hover {
background-color: #F0F0F0;
}
header .nav-bar .nav-2 ul .btn-black {
background-color: #000;
color: #fff;
}
header .nav-bar .nav-2 ul .btn-black:hover {
background-color: #4C4C4C;
}
.notice {
background-color: #D8E8E3;
padding: 2rem 0;
margin-bottom: 2rem;
}
.notice p {
width: 55%;
letter-spacing: 0.05em;
font-size: 19.5px;
font-weight: 600;
line-height: 1.75;
text-align: center;
margin: auto;
}
.notice p a {
color: #000;
text-decoration: underline;
}
.notice p a:hover {
text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/starbucks-favicon.png">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600;700;900&display=swap" rel="stylesheet">
<!-- FontAwesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="./images/starbucks-logo.png" alt="starbucks-logo">
</div>
<div class="nav-bar">
<nav class="nav-1">
<ul>
<li>Menu</li>
<li>Rewards</li>
<li>Gift Cards</li>
</ul>
</nav>
<nav class="nav-2">
<ul>
<li><i class="fas fa-map-marker-alt"></i> Find a store</li>
<li><a class="btn" href="#">Sign in</a></li>
<li><a class="btn-black" href="#">Join now</a></li>
</ul>
</nav>
</div>
</header>
<div class="notice">
<p>Facial coverings are now optional in our stores for our fully vaccinated customers, following CDC guidance, except where local regulations require it by law. Learn more</p>
</div>
</body>
</html>
Why is this happening? How can I fix the problem?
The problem is that the new <div> is covering the box shadow on the <header>. The solution I came up with was to give your <header> a relative positioning and a positive z-index, which stacks it higher "vertically" in the z-axis:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
text-decoration: none;
list-style: none;
}
header {
height: 101px;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 0 40px;
position: relative; /* added position relative and z-index */
z-index: 2;
}
header .logo {
margin-right: 4rem;
}
header .logo img {
width: 51px;
}
header .nav-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
font-weight: 700;
}
header .nav-bar a {
color: #000;
}
header .nav-bar a:hover {
color: #008248;
}
header .nav-bar .nav-1 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
letter-spacing: 0.1em;
}
header .nav-bar .nav-1 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: uppercase;
}
header .nav-bar .nav-1 ul li {
margin-right: 24px;
}
header .nav-bar .nav-2 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
header .nav-bar .nav-2 ul li {
margin-left: 24px;
}
header .nav-bar .nav-2 ul .btn, header .nav-bar .nav-2 ul .btn-black {
padding: 7px 16px;
border: 1px solid #000;
font-size: 14px;
border-radius: 30px;
}
header .nav-bar .nav-2 ul .btn:hover, header .nav-bar .nav-2 ul .btn-black:hover {
background-color: #F0F0F0;
}
header .nav-bar .nav-2 ul .btn-black {
background-color: #000;
color: #fff;
}
header .nav-bar .nav-2 ul .btn-black:hover {
background-color: #4C4C4C;
}
.notice {
background-color: #D8E8E3;
padding: 2rem 0;
margin-bottom: 2rem;
}
.notice p {
width: 55%;
letter-spacing: 0.05em;
font-size: 19.5px;
font-weight: 600;
line-height: 1.75;
text-align: center;
margin: auto;
}
.notice p a {
color: #000;
text-decoration: underline;
}
.notice p a:hover {
text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/starbucks-favicon.png">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600;700;900&display=swap" rel="stylesheet">
<!-- FontAwesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="./images/starbucks-logo.png" alt="starbucks-logo">
</div>
<div class="nav-bar">
<nav class="nav-1">
<ul>
<li>Menu</li>
<li>Rewards</li>
<li>Gift Cards</li>
</ul>
</nav>
<nav class="nav-2">
<ul>
<li><i class="fas fa-map-marker-alt"></i> Find a store</li>
<li><a class="btn" href="#">Sign in</a></li>
<li><a class="btn-black" href="#">Join now</a></li>
</ul>
</nav>
</div>
</header>
<div class="notice">
<p>Facial coverings are now optional in our stores for our fully vaccinated customers, following CDC guidance, except where local regulations require it by law. Learn more</p>
</div>
</body>
</html>
It might also be possible to view the shadow if the <div> that immediately followed the <header> had a transparent background, but since you have given it a specific background treatment that seemed like a solution that wasn't worth trying in this scenario.
UPDATE
Also, as user G-Cyrillus points out in the comments, given that the <div> following the <header> has no explicit position (and thus has the default position value of static), the z-index here can actually be omitted. You can see this below:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
text-decoration: none;
list-style: none;
}
header {
height: 101px;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 0 40px;
position: relative; /* added position relative ONLY; omitted z-index */
/* z-index: 2; */
}
header .logo {
margin-right: 4rem;
}
header .logo img {
width: 51px;
}
header .nav-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
font-weight: 700;
}
header .nav-bar a {
color: #000;
}
header .nav-bar a:hover {
color: #008248;
}
header .nav-bar .nav-1 {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
letter-spacing: 0.1em;
}
header .nav-bar .nav-1 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: uppercase;
}
header .nav-bar .nav-1 ul li {
margin-right: 24px;
}
header .nav-bar .nav-2 ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
header .nav-bar .nav-2 ul li {
margin-left: 24px;
}
header .nav-bar .nav-2 ul .btn, header .nav-bar .nav-2 ul .btn-black {
padding: 7px 16px;
border: 1px solid #000;
font-size: 14px;
border-radius: 30px;
}
header .nav-bar .nav-2 ul .btn:hover, header .nav-bar .nav-2 ul .btn-black:hover {
background-color: #F0F0F0;
}
header .nav-bar .nav-2 ul .btn-black {
background-color: #000;
color: #fff;
}
header .nav-bar .nav-2 ul .btn-black:hover {
background-color: #4C4C4C;
}
.notice {
background-color: #D8E8E3;
padding: 2rem 0;
margin-bottom: 2rem;
}
.notice p {
width: 55%;
letter-spacing: 0.05em;
font-size: 19.5px;
font-weight: 600;
line-height: 1.75;
text-align: center;
margin: auto;
}
.notice p a {
color: #000;
text-decoration: underline;
}
.notice p a:hover {
text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/starbucks-favicon.png">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#400;600;700;900&display=swap" rel="stylesheet">
<!-- FontAwesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Starbucks Coffee Company</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header>
<div class="logo">
<img src="./images/starbucks-logo.png" alt="starbucks-logo">
</div>
<div class="nav-bar">
<nav class="nav-1">
<ul>
<li>Menu</li>
<li>Rewards</li>
<li>Gift Cards</li>
</ul>
</nav>
<nav class="nav-2">
<ul>
<li><i class="fas fa-map-marker-alt"></i> Find a store</li>
<li><a class="btn" href="#">Sign in</a></li>
<li><a class="btn-black" href="#">Join now</a></li>
</ul>
</nav>
</div>
</header>
<div class="notice">
<p>Facial coverings are now optional in our stores for our fully vaccinated customers, following CDC guidance, except where local regulations require it by law. Learn more</p>
</div>
</body>
</html>
I've been working on my portfolio and I came across this video where you hover the navigation links and they make an upward transition. YouTube Video
The css overflow method which I've applied according to the video that will remove duplicate navlinks (About me, Tools etc.) but this isn't working for me and I can't figure out why.
Relevant HTMl:
<!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>Protfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<nav>
<div class="space1">
<div class="centered-content nav-logo">Logo</div>
<div class="centered-content empty-space1">
<!--empty space-->
</div>
</div>
<div class="space2">
<div class="centered-content empty-space2">
<!--empty space-->
</div>
<div class="centered-content nav-links">
<ul class="centered-content">
<li>
<a href="">
<span>About Me</span>
<span>About Me</span>
</a>
</li>
<li>
<a href="">
<span> Contact</span>
<span> Contact</span>
</a>
</li>
<li>
<a href="">
<span>Blog</span>
<span>Blog</span>
</a>
</li>
<li>
<a href="">
<span>Projects</span>
<span>Projects</span>
</a>
</li>
<li>
<a href="">
<span>Tools</span>
<span>Tools</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="intro-container">
<div class="intro-para">
<h1>Greetings All!!</h1>
Intro-content</div>
<div class="centered-content intro-image">
the image goes
</div>
</div>
</body>
</html>
Relevant CSS:
/* ADDITION */
.centered-content {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* END */
* {
box-sizing: border-box;
margin: 0%;
padding: 0%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
background-color:peachpuff;
font-family: roboto;
background-repeat: space;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
nav {
display: flex;
height: 10vh;
background-color: crimson;
}
.space1 {
justify-content: center;
align-items: center;
display: flex;
width: 50%;
}
.nav-logo {
display: flex;
width: 50%;
height: 100%;
}
.empty-space1 {
display: flex;
width: 50%;
height: 100%;
}
.space2 {
display: flex;
width: 50%;
height: 100%;
justify-content: center;
align-items: center;
}
.empty-space2 {
display: flex;
width: 50%;
height: 100%;
}
.nav-links {
display: flex;
width: 50%;
height: 100%;
}
.nav-links ul {
display: inline-flex;
list-style: none;
/* REMOVED! */
/* height: 100%; */
}
.nav-links ul li{
position: relative;
}
.nav-links ul li a {
position: relative;
display: block;
justify-content: space-evenly;
text-decoration:none;
margin: 0 .4em;
color: black;
overflow: hidden;
letter-spacing: 2px;
}
.nav-links ul li a span{
display: flex;
width: 100%;
position: relative;
transition: 0.5s;
background-color: lightslategrey;
justify-content: center;
align-items: center;
transition: 0.5s;
flex-direction: column;
}
.nav-links ul li a:hover span{
}
.intro-container{
display: flex;
padding: .2% .3% 0 .3% ;
}
.intro-para{
background-color:salmon;
width: 50%;
}
.intro-image{
width: 50%;
background-color: lightskyblue;
}
Your element should have a height. You have not provided height or max-height attribute for the .nav-links ul li a selector as given in the Youtube video link you provided.
So basically I want to be able to align my icons in my navbar but they are staying on the left, the icons are meant to be on the same line and centered when the sidebar is opened.
As you can see they are staying on the left
Image:
https://i.stack.imgur.com/8n3WO.png
If you wanna see what i mean by having the icons align on same line and be centered, check Tom Walkers navbar below
https://iamtomwalker.com
Navbar code:
session_start();
?>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/navbar.css?d=<?php echo time(); ?>">
<link rel="stylesheet" type="text/css" href="./css/style.css?d=<?php echo time(); ?>">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="material-icons">menu</i>
</span>
Test
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Covers</li>
<li>Music</li>
<li>Newsletter</li>
<li style="display: inline-block;text-align: center; clear:left;"><i class="material-icons">menu</i> </li>
<li style="display: inline-block;text-align: center; clear:left;"><i class="material-icons">menu</i> </li>
<?php
if(isset($_SESSION['logged_in'])){
echo '<li>Account</li> ';
echo '<li>Manage</li> ';
echo '<li>Logout</li> ';
}
?>
</ul>
</nav>
<script>
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
});
</script>
Navbar CSS
#import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.navbar {
font-size: 18px;
background-color: #151515;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.main-nav {
list-style-type: none;
display: none;
clear: left;
}
.nav-links, .logo {
text-decoration: none;
font-family: 'Fredericka the Great', cursive;
color: rgba(255, 255, 255, 0.7);
}
.nav-links:hover{
text-decoration: underline;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
#media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover, .nav-links:hover {
color: rgba(255, 255, 255, 1);
}```
[1]: https://iamtomwalker.com
A few ways to do this, but most simply, add display: inline, and float: left to your li css
.main-nav li {
display: inline;
float: left;
margin: 15px auto;
}
Display inline will make the list items no longer block elements, and they will fall in place, side by side.
Floating will just put them all to either side of the parent.
You can set your spacing from here.
https://jsfiddle.net/ywk1cd5h/6/
I would look to wrap the icons that you want to be within a straight line in another flex box container.
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Covers</li>
<li>Music</li>
<li>Newsletter</li>
<div class="icons">
<li style="text-align: center; "><i class="material-icons">menu</i> </li>
<li style="text-align: center;"><i class="material-icons">menu</i> </li>
</div>
</ul>
And then center the content. You can also adjust the margin: 15px auto as well.
.icons {
display: flex;
justify-content: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
text-align: center;
margin: 15px 0;
}
So I'm trying to make a simple nav bar with the logo on the right and the menu and search option on the left. However I cannot figure out how to vertically align them. I feel like this has probably an easy fix but I just can't figure it out. It's for a school asignment.
Here's my html & css
.main-nav {
display: inline;
text-align: center;
padding: 10px 0px 10px 0px;
margin-top: 20px;
}
.main-nav li {
display: inline;
border: none;
}
.main-nav a {
padding: 10px;
}
.navbardesk {
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
background-color: rgba(141, 125, 31, 0.9);
}
.logo {
display: inline-block;
grid-area: logo;
top: auto;
bottom: auto;
}
.main-nav {
grid-area: links;
background-color: transparent;
}
.searchicon {
grid-area: search;
justify-content: center;
}
<div class="navbardesk v-align">
<h1 class="logo">Buurtsuper Leo van der Drift</h1>
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Over ons</li>
<li>Kantoren en bedrijven</li>
<li>Bestellen</li>
<li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
</ul>
<i class="fas fa-search searchicon"></i>
</div>
it currently looks like this
and I want it to look like this
Remove h1 and ul margin and try the snippet below.
.main-nav {
display: inline;
text-align: center;
padding: 10px 0px 10px 0px;
margin-top: 20px;
}
.main-nav li {
display: inline;
border: none;
}
.main-nav a {
padding: 10px;
}
.navbardesk {
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
background-color: rgba(141, 125, 31, 0.9);
align-items: center;
padding: .5rem;
}
.logo {
display: inline-block;
grid-area: logo;
top: auto;
bottom: auto;
border: solid;
margin: 0;
padding: 0;
}
.main-nav {
grid-area: links;
background-color: transparent;
border: solid;
margin: 0;
}
.searchicon {
grid-area: search;
justify-content: center;
}
<div class="navbardesk v-align">
<h1 class="logo">Buurtsuper Leo van der Drift</h1>
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Over ons</li>
<li>Kantoren en bedrijven</li>
<li>Bestellen</li>
<li class="nav-links social"> <i class="fab fa-facebook-square"></i> <i class="fab fa-instagram"></i></li>
</ul>
<i class="fas fa-search searchicon"></i>
</div>
I can't reproduce the error given the code you have provided but adding align-items:center; should do what you want.
.navbardesk{
display: grid;
grid-template-areas: "logo links search";
justify-content: center;
align-items:center;
background-color: rgba(141,125,31,0.9);
}
make sure, your li, a tag should be display: inline-block it will not work margin, padding in inline display.
I believe this will produce exactly what you are looking for, may be some tweaking you still need depending on your situation
#js-menu {
grid-template-columns: repeat(4,200px);
background-color: #f3f3ec;
justify-items: end;
align-items: center;
display: grid;
}
put this line of code along with your other css. there are many ways around!