I am learning about CSS and I code from Coding Snow.
Put the code here : https://jsfiddle.net/xmbohx/qyew52th/12/
Now I want to add a subtitle under the title, with the following script, but does not work. Please advise :
.wrapper .header .header-menu .sub_title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
font-weight: 200;
}
.wrapper .header .header-menu .sub_title span {
color: #ffff;
}
i just move "subtitle" div move inside "title" class. then it works now you can see subtitle text show under title text.
$(document).ready(function () {
$(".sidebar-btn").click(function () {
$(".wrapper").toggleClass("kollapse");
});
});* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
background: #fff;
}
.wrapper .header {
z-index: 1;
background: #22242A;
position: fixed;
width: calc(100% - 0%);
height: 90px;
display: flex;
top: 0;
}
.wrapper .header .header-menu {
width: calc(100% - 0%);
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.wrapper .header .header-menu .title {
color: #fff;
font-size: 25px;
text-transform: uppercase;
font-weight: 900;
}
.wrapper .header .header-menu .title span {
color: #4ccee8;
}
.wrapper .header .header-menu .sub_title {
color: #fff;
font-size: 15px;
text-transform: uppercase;
font-weight: 200;
}
.wrapper .header .header-menu .sub_title span {
color: #ffff;
}
.wrapper .header .header-menu .sidebar-btn {
color: #fff;
position: absolute;
margin-left: 240px;
font-size: 22px;
font-weight: 900;
cursor: pointer;
transition: 0.3s;
transition-property: color;
}
.wrapper .header .header-menu .sidebar-btn:hover {
color: #4ccee8;
}
.wrapper .header .header-menu ul {
display: flex;
}
/*tombol sebelah my panel*/
.wrapper .header .header-menu ul li a {
background: #fff;
color: #000;
display: block;
margin: 0 10px;
font-size: 18px;
width: 34px;
height: 34px;
line-height: 35px;
text-align: center;
border-radius: 50%;
transition: 0.3s;
transition-property: background, color;
}
.wrapper .header .header-menu ul li a:hover {
background: #4ccee8;
color: #fff;
}
.wrapper .sidebar {
z-index: 1;
background: #2f323a;
position: fixed;
top: 90px;
width: 250px;
height: calc(100% - 9%);
transition: 0.3s;
transition-property: width;
overflow-y: auto;
}
.wrapper .sidebar .sidebar-menu {
overflow: hidden;
}
.wrapper .sidebar .sidebar-menu .profile img {
margin: 20px 0;
width: 100px;
height: 100px;
border-radius: 50%;
}
.wrapper .sidebar .sidebar-menu .profile p {
color: #bbb;
font-weight: 700;
margin-bottom: 10px;
}
.wrapper .sidebar .sidebar-menu .item {
width: 250px;
overflow: hidden;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn {
display: block;
color: #fff;
position: relative;
padding: 25px 20px;
transition: 0.3s;
transition-property: color;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn:hover {
color: #4ccee8;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn i {
margin-right: 20px;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn .drop-down {
float: right;
font-size: 12px;
margin-top: 3px;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu {
background: #3498d8;
overflow: hidden;
max-height: 0;
transition: 0.3s;
transition-property: background, max-height;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu a {
display: block;
position: relative;
color: #fff;
white-space: nowrap;
font-size: 15px;
padding: 20px;
border-bottom: 1px solid #8fc5e9;
transition: 0.3s;
transition-property: background;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu a:hover {
background: #55b1f0;
}
.wrapper .sidebar .sidebar-menu .item .sub-menu i {
padding-right: 20px;
font-size: 15px;
}
.wrapper .sidebar .sidebar-menu .item:target .sub-menu {
max-height: 500px;
}
.wrapper .main-container {
width: (100% - 250px);
margin-top: 70px;
margin-left: 250px;
padding: 15px;
background: url("images/background.jpg")no-repeat;
background-size: cover;
height: 100vh;
transition: 0.3s;
}
.wrapper.kollapse .sidebar {
width: 70px;
}
.wrapper.kollapse .sidebar .profile img,
.wrapper.kollapse .sidebar .profile p,
.wrapper.kollapse .sidebar a span {
display: none;
}
.wrapper.kollapse .sidebar .sidebar-menu .item .menu-btn {
font-size: 23px;
}
.wrapper.kollapse .sidebar .sidebar-menu .item .sub-menu i {
font-size: 38x;
padding-left: 3px;
}
.wrapper.kollapse .main-container {
width: (100% - 70px);
margin-left: 70px;
}
.wrapper .main-container .card {
background: #fff;
padding: 15px;
font-size: 14px;
margin-bottom: 10px;
margin-top: 20px;
}
/*responsive CSS*/
@media screen and (max-width:500px) {
.wrapper .sidebar {
width: 70px;
}
.wrapper .sidebar .profile img,
.wrapper .sidebar .profile p,
.wrapper .sidebar a span {
display: none;
}
.wrapper .sidebar .sidebar-menu .item .menu-btn {
font-size: 23px;
}
.wrapper.sidebar .sidebar-menu .item .sub-menu i {
font-size: 38x;
padding-left: 3px;
}
.wrapper .main-container {
width: (100% - 70px);
margin-left: 70px;
}
}<!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>Apanel</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<!---wrapper starts-->
<div class="wrapper">
<!---header menu-->
<div class="header">
<div class="header-menu">
<div class="title">My <span>Panel</span><div class="sub_title">SubTitle</div></div>
<div class="sidebar-btn">
<i class="fas fa-bars"></i>
</div>
<ul>
<li><a href="#"><i class="fas fa-search"></i></a></li>
<li><a href="#"><i class="fas fa-bell"></i></a></li>
<li><a href="#"><i class="fas fa-power-off"></i></a></li>
</ul>
</div>
</div>
<!--/header menu-->
<!--sidebar-->
<div class="sidebar">
<div class="sidebar-menu">
<center class="profile">
<img src="images/img1.jpg" alt="" class="src">
<p>User</p>
</center>
<li class="item">
<a href="#" class="menu-btn">
<i class="fas fa-desktop"></i><span>Dashboard</span>
</a>
</li>
<li class="item" id="profile">
<a href="#profile" class="menu-btn">
<i class="fa fa-user-circle"></i><span>Profile <i class="fas fa-chevron-down drop-down"></i>
</span>
</a>
<div class="sub-menu">
<a href="#"><i class="fas fa-image"></i><span>Picture</span></a>
<a href="#"><i class="fas fa-address-card"></i><span>Info</span></a>
</div>
</li>
<li class="item" id="messages">
<a href="#messages" class="menu-btn">
<i class="fa fa-envelope"></i><span> Messages<i class="fas fa-chevron-down drop-down"></i>
</span>
</a>
<div class="sub-menu">
<a href="#"><i class="fas fa-envelope"></i><span>New</span></a>
<a href="#"><i class="fas fa-envelope-square"></i><span>Sent</span></a>
<a href="#"><i class="fas fa-exclamation-circle"></i><span>Spam</span></a>
</div>
</li>
<li class="item" id="settings">
<a href="#settings" class="menu-btn">
<i class="fa fa-cog"></i><span>Settings<i class="fas fa-chevron-down drop-down"></i>
</span>
</a>
<div class="sub-menu">
<a href="#"><i class="fas fa-lock"></i><span>Password</span></a>
<a href="#"><i class="fas fa-language"></i><span>Language</span></a>
<a href="#"><i class="fas fa-exclamation-circle"></i><span>Spam</span></a>
</div>
</li>
<li class="item">
<a href="#" class="menu-btn">
<i class="fas fa-info-circle"></i><span>About</span>
</a>
</li>
</div>
</div>
<!--/sidebar-->
<!--main container-->
<div class="main-container">
<div class="card">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="card">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<!--/main container-->
</div>
<!---end wrapper-->
</body>
</html>Only wrap title and sub-title inside a div:
<div>
<div class="title">My <span>Panel</span></div>
<div class="sub_title">SubTitle</div>
</div>
edited code: https://jsfiddle.net/arman1373/zgra6ctw/