I would like the title to be at the bottom of the header, here is an example below
Except that, my problem is that the title is placed at the same height as the header and not at the bottom.
If I remove the header block, you can see the title.
I think it's a problem with my blocks? However, there is one solution, but I want to avoid doing a padding-top on the title to get this result:
I made a reproduction angular.
Here is a reproduction html/css.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 240px;
background: #0a2558;
transition: all 0.5s ease;
}
.sidebar.active {
width: 60px;
}
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
background-color: #fff;
}
.sidebar .logo-details i {
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center;
}
.sidebar .logo-details .logo_name img {
height: 100px;
margin-left: 18px;
}
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
display: flex;
justify-content: start;
text-decoration: none;
transition: all 0.4s ease;
border-bottom: 1px solid #ccc;
padding: 13px 0;
}
.sidebar .nav-links li a.active {
background: #081d45;
}
.sidebar .nav-links li a:hover {
background: #081d45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links .item {
text-transform: uppercase;
}
.sidebar .nav-links li i.fa-chevron-down {
right: 0;
position: absolute;
}
.sidebar .nav-links li.active i.fa-chevron-down {
transform: rotate(180deg);
}
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.home-section {
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.home-section .heading {
display: flex;
justify-content: space-between;
height: 100px;
background: #fff;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.home-section .heading .sidebar-button {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
.heading .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}
.menu-summary-container {
display: grid;
margin: 0 auto;
text-align: center;
width: 100%;
}
.menu-summary-container .user,
.menu-summary-container .last-connection {
font-size: 22px;
}
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<script src="script.js"></script>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="logo_name">
<a href="https://zupimages.net/viewer.php?id=22/30/27uw.png"
><img src="https://zupimages.net/up/22/30/27uw.png" alt=""
/></a>
</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="links_name" style="margin-left: 20px;">Administrateur</span>
<i class="fa fa-chevron-down"></i>
</a>
</li>
</ul>
</div>
<section class="home-section">
<div class="heading">
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="menu-summary-container">
<span class="user">User: </span>
<span class="last-connection">last connection: </span>
</div>
</div>
<h1>Portfolio page</h1>
</section>
</body>
Thank you a lot for your help.
If you must use a fixed position together with flexbox you can wrap the text in another div:
<div class="heading text">
<h1>Portfolio page</h1>
</div>
I then added some additional CSS:
.home-section .heading.text {
height: calc(100% - 100px);
align-items: start;
top: 100px;
padding-top: 10px;
background: #eee;
}
If you can follow the advice from #isherwood and don't mix fixed position and flexbox at all.
Example layouts using flexbox can be searched on the internet.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 240px;
background: #0a2558;
transition: all 0.5s ease;
}
.sidebar.active {
width: 60px;
}
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
background-color: #fff;
}
.sidebar .logo-details i {
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center;
}
.sidebar .logo-details .logo_name img {
height: 100px;
margin-left: 18px;
}
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
display: flex;
justify-content: start;
text-decoration: none;
transition: all 0.4s ease;
border-bottom: 1px solid #ccc;
padding: 13px 0;
}
.sidebar .nav-links li a.active {
background: #081d45;
}
.sidebar .nav-links li a:hover {
background: #081d45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links .item {
text-transform: uppercase;
}
.sidebar .nav-links li i.fa-chevron-down {
right: 0;
position: absolute;
}
.sidebar .nav-links li.active i.fa-chevron-down {
transform: rotate(180deg);
}
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.home-section {
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.home-section .heading {
display: flex;
justify-content: space-between;
height: 100px;
background: #fff;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.home-section .heading.text {
height: calc(100% - 100px);
align-items: start;
top: 100px;
padding-top: 10px;
background: #eee;
}
.home-section .heading .sidebar-button {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
.heading .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}
.menu-summary-container {
display: grid;
margin: 0 auto;
text-align: center;
width: 100%;
}
.menu-summary-container .user,
.menu-summary-container .last-connection {
font-size: 22px;
}
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<script src="script.js"></script>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="logo_name">
<a href="https://zupimages.net/viewer.php?id=22/30/27uw.png"
><img src="https://zupimages.net/up/22/30/27uw.png" alt=""
/></a>
</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="links_name" style="margin-left: 20px;">Administrateur</span>
<i class="fa fa-chevron-down"></i>
</a>
</li>
</ul>
</div>
<section class="home-section">
<div class="heading">
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="menu-summary-container">
<span class="user">User: </span>
<span class="last-connection">last connection: </span>
</div>
</div>
<div class="heading text">
<h1>Portfolio page</h1>
</div>
</section>
</body>
Related
Hello I'm trying to style my navbar and have everything aligned properly, but I'm not sure what is making my nav content display like this. Also, how can I remove the grey box next to my nav brand? I messed around with it on the inspect elements, but I don't know how to get rid of it. I have provided my code below. Thanks!
When bs css link isn't added (How I want to keep it):
When bs css link is added:
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Dashboard UI </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
My details
Profile
Password
Team
Plan
Billing
Email
Notifications
Integrations
API
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Intergrations and connected apps</h2>
<p>Supercharge your workflow and connect the tool you use every day.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Request integration</span>
</a>
</div>
</div>
<div class="content">
<div class="content-panel">
<div class="vertical-tabs">
View all
Developer tools
Communication
Productivity
Browser tools
Marketplace
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Zeplin</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Collaboration between designers and developers.</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>GitHub</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Link pull requests and automate workflows.</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Figma</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Embed file previews in projects.</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script><script src="./script.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: flex;
align-items: flex-start;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
You are using Bootstrap 5, yet you did not linked it in the head:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Then change the structure of your Navbar:
<!---Navbar--->
<header>
<div class="navbar navbar-expand-md">
<div class="container">
Logo Here
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Page</li>
<li class="nav-item dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Dropdown 01</li>
<li>Dropdown 02</li>
</ul>
</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
</div>
</header>
<!---Navbar--->
And finally, remove the custom CSS you made in your CSS file. Eventually, in the css file, search for Nav and delete everything related to the navbar
So actually, I use boxicons to display an arrow icon.
<ul class="nav-links">
<li >
<a class="item" >
<i></i>
<span class="links_name">Portfolio</span>
<i class="fa fa-chevron-down"></i>
</a>
<ul class="submenu" #submenu></ul>
</li>
</ul>
I would like the arrow to be red, so I downloaded the icon and changed the image to red using an image editor.
Here is the code SVM
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="288" height="288">
<svg xmlns="http://www.w3.org/2000/svg" width="288" height="288" viewBox="0 0 24 24">
<path fill="#ff3e2b" id="arrow" d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" class="color000 svgShape"/>
</svg>
</svg>
I don't know where I have to include #arrow in CSS ? I think the class fa-chevron-down should be deleted but I'm not sure where/how to add #arrow
Thank you in advance for your help.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 240px;
background: #0a2558;
transition: all 0.5s ease;
}
.sidebar.active {
width: 60px;
}
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
background-color: #fff;
}
.sidebar .logo-details i {
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center;
}
.sidebar .logo-details .logo_name img {
height: 100px;
margin-left: 18px;
}
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
display: flex;
justify-content: start;
text-decoration: none;
transition: all 0.4s ease;
border-bottom: 1px solid #ccc;
padding: 13px 0;
}
.sidebar .nav-links li a.active {
background: #081d45;
}
.sidebar .nav-links li a:hover {
background: #081d45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links .item {
text-transform: uppercase;
}
.sidebar .nav-links li i.fa-chevron-down {
right: 0;
position: absolute;
}
.sidebar .nav-links li.active i.fa-chevron-down {
transform: rotate(180deg);
}
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.sidebar .nav-links .submenu {
height: 0;
overflow: hidden;
background: #239cd3;
transition: height 0.4s ease;
text-transform: uppercase;
white-space: nowrap;
}
.sidebar .nav-links .submenu a:hover {
background: #198ac1;
color: #fff;
}
.sidebar .nav-links .submenu .links_subname {
color: #fff;
font-size: 12px;
margin-left: 50px;
}
.sidebar .nav-links .log_out {
position: absolute;
bottom: 0;
width: 100%;
}
.home-section {
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section {
width: calc(100% - -30px);
left: -30px;
}
.home-section nav {
display: flex;
justify-content: space-between;
height: 100px;
background: #fff;
display: flex;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section nav {
left: 0px;
width: calc(100% - 0px);
}
.home-section nav .sidebar-button {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}
.home-section nav .search-box {
position: relative;
height: 50px;
max-width: 550px;
width: 100%;
margin: 0 20px;
}
nav .search-box input {
height: 100%;
width: 100%;
outline: none;
background: #f5f6fa;
border: 2px solid #efeef1;
border-radius: 6px;
font-size: 18px;
padding: 0 15px;
}
nav .search-box .bx-search {
position: absolute;
height: 40px;
width: 40px;
background: #2697ff;
right: 5px;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 22px;
transition: all 0.4 ease;
}
.home-section .home-content {
position: relative;
padding-top: 104px;
}
.home-content .overview-boxes {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 20px;
margin-bottom: 26px;
}
.overview-boxes .box {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 4 - 15px);
background: #fff;
padding: 15px 14px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.overview-boxes .box-topic {
font-size: 20px;
font-weight: 500;
}
.home-content .box .number {
display: inline-block;
font-size: 35px;
margin-top: -6px;
font-weight: 500;
}
.home-content .box .indicator {
display: flex;
align-items: center;
}
.home-content .box .indicator i {
height: 20px;
width: 20px;
background: #8fdacb;
line-height: 20px;
text-align: center;
border-radius: 50%;
color: #fff;
font-size: 20px;
margin-right: 5px;
}
.box .indicator i.down {
background: #e87d88;
}
.home-content .box .indicator .text {
font-size: 12px;
}
.home-content .box .cart {
display: inline-block;
font-size: 32px;
height: 50px;
width: 50px;
background: #cce5ff;
line-height: 50px;
text-align: center;
color: #66b0ff;
border-radius: 12px;
margin: -15px 0 0 6px;
}
.home-content .box .cart.two {
color: #2bd47d;
background: #c0f2d8;
}
.home-content .box .cart.three {
color: #ffc233;
background: #ffe8b3;
}
.home-content .box .cart.four {
color: #e05260;
background: #f7d4d7;
}
.home-content .total-order {
font-size: 20px;
font-weight: 500;
}
.home-content .sales-boxes {
display: flex;
justify-content: space-between;
/* padding: 0 20px; */
}
/* left box */
.home-content .sales-boxes .recent-sales {
width: 65%;
background: #fff;
padding: 20px 30px;
margin: 0 20px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.home-content .sales-boxes .sales-details {
display: flex;
align-items: center;
justify-content: space-between;
}
.sales-boxes .box .title {
font-size: 24px;
font-weight: 500;
/* margin-bottom: 10px; */
}
.sales-boxes .sales-details li.topic {
font-size: 20px;
font-weight: 500;
}
.sales-boxes .sales-details li {
list-style: none;
margin: 8px 0;
}
.sales-boxes .sales-details li a {
font-size: 18px;
color: #333;
font-size: 400;
text-decoration: none;
}
.sales-boxes .box .button {
width: 100%;
display: flex;
justify-content: flex-end;
}
.sales-boxes .box .button a {
color: #fff;
background: #0a2558;
padding: 4px 12px;
font-size: 15px;
font-weight: 400;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
}
.sales-boxes .box .button a:hover {
background: #0d3073;
}
/* Right box */
.home-content .sales-boxes .top-sales {
width: 35%;
background: #fff;
padding: 20px 30px;
margin: 0 20px 0 0;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.sales-boxes .top-sales li {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
.sales-boxes .top-sales li a img {
height: 40px;
width: 40px;
object-fit: cover;
border-radius: 12px;
margin-right: 10px;
background: #333;
}
.sales-boxes .top-sales li a {
display: flex;
align-items: center;
text-decoration: none;
}
.sales-boxes .top-sales li .product,
.price {
font-size: 17px;
font-weight: 400;
color: #333;
}
.menu-summary-container {
display: grid;
margin: 0 auto;
text-align: center;
width: 100%;
}
.menu-summary-container .user,
.menu-summary-container .last-connection {
font-size: 22px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
</head>
<body>
<div class="sidebar" >
<div class="logo-details">
<span class="logo_name">
<img src="https://zupimages.net/up/22/30/27uw.png" />
</span>
</div>
<ul class="nav-links">
<li >
<a class="item" >
<i></i>
<span class="links_name">Portfolio</span>
<i class="fa fa-chevron-down"></i>
</a>
<ul class="submenu" #submenu></ul>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="sidebarBtn"></i>
</div>
<div class="menu-summary-container">
<span class="user">User: </span>
<span class="last-connection">last connection: </span>
</div>
</nav>
</section>
</body>
</html>
i.fa.fa-chevron-down{
color: red!important;
}
If you don't mind adding !important attribute, this is how you can perform the action with CSS only
You're mixing different icon libraries.
If you need to use boxicons you should delete fontAwesome elements like:
<i class="fa fa-chevron-down"></i>
Either replace this element with the svg directly:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
.sidebar {
height: 100%;
width: 240px;
background: #0a2558;
transition: all 0.5s ease;
border: 4px solid #ccc;
}
li a {
color: #fff;
display: flex;
padding: 0.2em;
}
.svgItem {
height: 1.3em;
margin-left: auto;
}
.color000 {
color: red
}
.box-icon {
fill: red;
margin-left: auto;
}
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<script src="https://unpkg.com/boxicons#2.1.2/dist/boxicons.js"></script>
<body>
<div class="sidebar">
<ul class="nav-links">
<li>
<a class="item">
<span class="links_name">Portfolio</span>
<svg class="svgItem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor" id="arrow" d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" class="color000 svgShape"/>
</svg>
</a>
<ul class="submenu" #submenu></ul>
</li>
<li>
<a>Rocket <box-icon class="box-icon" name="chevron-down"></box-icon></a>
</li>
</ul>
</div>
Or use the web component approach described here
<box-icon class="box-icon" name="chevron-down"></box-icon>
If you're using the svg icon as an inlined element, you would change the icon color via fill attribute.
path{fill:red}
It's recommended to strip the fill attribute in your svg markup to avoid unnecessary high specificity.
<svg viewBox="0 0 24 24">
<path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" />
</svg>
However you can make a path inherit a font/text color by using the currentColor keyword:
path{color: red}
<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" />
</svg>
I'm trying to add a header on top of this image with a gradient that I've made but it gives me a weird white background as such https://i.stack.imgur.com/ppuJq.png I want the text on top of the image to have a transparent background. Made the navbar black so its easier to see but anyway, how do I remove it? I am aware that the js script is unfinished if that has anything to do with it.
here is my code
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>
It's because of the background color on body tag and the transparent background on .WelcomeMenu. Ways to fix (Only one of them):
Add a background color to .WelcomeMenu
Have a parent element and set the background color to black
Make the background color of body black
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
background-color: red
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>
The image that you are using is a background image! so for a better solution you can make it the background of the div.WelcomeMenu.
The white color is the background of the page (by default - which is blank white page). and the order of the elements is:
Navbar - black background
h1 - the background of the page
img - the image itself
that means, the h1 is between the two elements.
In case you still want the elements as they are, you can simply add:
.WelcomeMenu {
position: relative;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
position: absolute;
top: 100px; (change it as you wish)
left: 100px; (change it as you wish)
}
The Code:
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
position: relative;
height: 85vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </h1>
</div>
</section>
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase-img img:hover {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
// When i hover over the showcase-img container the opacity changes but when the mouse goes over the ul which contains 2 li's that are icons the hovering stops and the opacity resets which shouldn't happen, i want the opacity to stay at 0.7 while the mouse is in the showcase-img container, how can i fix this? Thanks!
Rather than applying :hover directly on image like this .showcase-img img:hover img{} apply it directly on parent div it means .showcase:hover img{}. This should be something like this:
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase:hover img {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I'm trying to make a header for a project. There will be dropdown menus. But there is a problem with mobile compatibility as below.
It looks like this when working beautifully above 991 pixels and below 991 pixels and this is very annoying. Can you help?
$('.main-d-l').hover(
function(){ $('.arrow').addClass('fa-rotate-270') },
function(){ $('.arrow').removeClass('fa-rotate-270') }
)
$(document).ready(function(){
// Toggle Navigation Bar
$('.hamburger-menu').click(function(){
$('.nav-btn').toggleClass("active");
$('.hamburger-menu').toggleClass("active");
});
// Toggle Dropdown Menu
$('.main-dropdown-link').click(function(){
$('.dropdown').toggleClass("active");
});
});
header {
position: fixed;
top: 0;
background-color: #fff;
width: 100%;
z-index: 1000;
box-shadow: 0 0px 10px 5px rgba(0, 0, 0, .05);
}
header .container {
width: 100%;
max-width: 120rem;
height: 7rem;
margin: 0px auto;
display: flex;
position: relative;
}
header .container .logo-container {
display: flex;
align-items: center;
}
header .container .logo-container img {
height: 7rem;
}
header .container .logo-container h1 {
font-family: 'Arima Madurai', cursive;
font-weight: 900;
margin-bottom: 0px;
font-size: 2rem;
}
header .container .logo-container h1 a {
text-decoration: none;
color: #503775;
}
header .container .nav-btn {
flex: 3;
display: flex;
}
header .container .nav-btn .nav-links {
flex: 2;
}
header .container .nav-btn .nav-links>ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
header .container .nav-btn .nav-links ul .nav-link {
position: relative;
cursor: pointer;
height: 7rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0px 20px;
transition: .3s;
}
header .container .nav-btn .nav-links ul .nav-link:hover {
background-color: #95389E;
}
header .container .nav-btn .nav-links ul .nav-link>a {
position: relative;
width: 100%;
font-size: 1.5rem;
height: 7rem;
color: #95389E;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: .3s;
}
header .container .nav-btn .nav-links ul .nav-link:hover>a {
color: #fff;
}
header .container .nav-btn .nav-links ul .nav-link>a i {
margin-right: 5px;
}
header .container .nav-btn .search-box {
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
header .container .nav-btn .search-box form {
display: flex;
align-items: center;
justify-content: center;
border-left: 2px solid #e0e0e0;
height: 7rem;
}
header .container .nav-btn .search-box form input {
font-size: 1.2rem;
padding: 8px;
border: none;
outline: 0;
width: 15rem;
}
header .container .nav-btn .search-box form button {
height: 7rem;
padding: 0px 1rem;
border: none;
background-color: #fff;
font-size: 1.8rem;
color: #5A5A5A;
transition: .3s;
}
header .container .nav-btn .search-box form button:hover {
color: #95389E;
}
header .container .nav-btn .nav-links ul .nav-link .main-dropdown-link .arrow {
margin-left: 5px;
transition: .3s;
}
header .container .nav-btn .nav-links ul .nav-link .dropdown {
position: absolute;
top: 70px;
left: 0;
width: 30rem;
border-radius: 0px 0px 5px 5px;
background-color: #fff;
border-top: 2px solid #95389E;
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
transform: translateY(0px);
opacity: 0;
pointer-events: none;
transition: .5s;
}
header .container .nav-btn .nav-links ul .nav-link .dropdown ul {
list-style: none;
position: relative;
padding: 10px 5px;
}
header .container .nav-btn .nav-links ul .nav-link .dropdown ul .dropdown-link>a {
display: flex;
color: #95389E;
font-size: 1.4rem;
font-weight: 600;
text-decoration: none;
padding: .6rem 1rem;
align-items: center;
justify-content: space-between;
transition: .3s;
}
header .container .nav-btn .nav-links ul .nav-link .dropdown ul .dropdown-link>a:hover {
padding-left: 2rem;
}
header .container .nav-btn .nav-links ul .nav-link:hover>.dropdown {
transform: translate(0, 0);
opacity: 1;
pointer-events: auto;
}
header .container .hamburger-menu-container {
flex: 1;
display: none;
align-items: center;
justify-content: flex-end
}
header .container .hamburger-menu-container .hamburger-menu {
width: 5rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
header .container .hamburger-menu-container .hamburger-menu div {
width: 3.6rem;
height: 4px;
border-radius: 1px;
background-color: #95389E;
position: relative;
z-index: 1001;
transition: .5s;
}
header .container .hamburger-menu-container .hamburger-menu div::after,
header .container .hamburger-menu-container .hamburger-menu div::before {
content: '';
position: absolute;
width: inherit;
height: inherit;
background-color: #95389E;
border-radius: 1px;
transition: .5s;
}
header .container .hamburger-menu-container .hamburger-menu div::before {
transform: translateY(-12px);
}
header .container .hamburger-menu-container .hamburger-menu div::after {
transform: translateY(12px);
}
header .container .hamburger-menu-container .hamburger-menu.active div {
background-color: transparent;
}
header .container .hamburger-menu-container .hamburger-menu.active div::before {
transform: translateY(0) rotate(-45deg);
}
header .container .hamburger-menu-container .hamburger-menu.active div::after {
transform: translateY(0) rotate(45deg);
}
#keyframes headerAnimation {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#media (max-width: 991px) {
header .container .hamburger-menu-container {
display: flex
}
header .container #check {
display: block
}
header .container .nav-btn {
position: fixed;
height: calc(100vh - 7rem);
top: 7rem;
right: -100%;
width: 100%;
background-color: #fff;
flex-direction: column;
align-items: center;
justify-content: space-between;
overflow-x: hidden;
overflow-y: auto;
transition: .6s
}
header .container .nav-btn .nav-links {
flex: initial;
width: 100%
}
header .container .nav-btn .nav-links>ul {
justify-content: center;
flex-direction: column
}
header .container .nav-btn .nav-links ul .nav-link {
width: 100%;
transition: .3s;
opacity: 0;
transform: translateY(15px)
}
header .container .nav-btn .nav-links ul .nav-link>a {
line-height: 1;
padding: 1.6rem 2rem
}
header .container .nav-btn .nav-links ul .nav-link>a i {
display: none;
}
header .container .nav-btn .nav-links ul .nav-link>a i.arrow {
display: block;
}
header .container .nav-btn .nav-links ul .nav-link>a:hover {
padding-left: 30px
}
header .container .nav-btn .nav-links ul .nav-link>a::before {
display: none
}
header .container .nav-btn .nav-links ul .nav-link .dropdown {
position: initial;
top: initial;
left: initial;
transform: initial;
opacity: 1;
pointer-events: auto;
width: 100%;
padding: 0;
display: none;
}
header .container .nav-btn .nav-links ul .nav-link>.dropdown.active {
display: block;
}
header .container .nav-btn.active {
right: 0
}
.nav-btn.active ul .nav-link {
animation: headerAnimation .3s ease forwards .6s
}
}
<!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>
<!-- Custom Style -->
<link rel="stylesheet" href="css/style.css">
<!-- Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/cd25521a32.js" async crossorigin="anonymous"></script>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="logo-container">
<a href="index.html" title="RaBlogin">
<img src="img/RaBlogin.png" alt="RaBlogin">
</a>
<h1>RaBlogin</h1>
</div>
<nav class="nav-btn">
<div class="nav-links">
<ul>
<li class="nav-link">
<i class="fas fa-home"></i> Anasayfa
</li>
<li class="nav-link main-d-l">
<a class="main-dropdown-link"><i class="fas fa-th-list"></i> Kategoriler <i class="fas fa-chevron-down arrow"></i></a>
<div class="dropdown">
<ul>
<li class="dropdown-link">
Blog
</li>
<li class="dropdown-link">
SEO
</li>
<li class="dropdown-link">
WordPress
</li>
<li class="dropdown-link">
Web Yazılımları
</li>
<li class="dropdown-link">
Genel Yazılar
</li>
</ul>
</div>
</li>
<li class="nav-link">
<i class="fas fa-bookmark"></i> Hakkımızda
</li>
<li class="nav-link">
<i class="far fa-comment"></i> İletişim
</li>
</ul>
</div>
<div class="search-box">
<form action="">
<input type="text" placeholder="Arama Yap...">
<button type="submit" class="search-icon"><i class="fas fa-search"></i></button>
</form>
</div>
</nav>
<div class="hamburger-menu-container">
<div class="hamburger-menu">
<div></div>
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
How can I solve this problem? In the mobile version, the dropdown part does not push other elements and stays on the side.