CSS header position-CodePudding

I am learning about CSS and I code from Coding Snow.

Put the code here :

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;
}

CodePudding user response：

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 >
        <!---header menu-->
        <div >
            <div >
                <div >My <span>Panel</span><div >SubTitle</div></div>
                
                <div >
                    <i ></i>
                </div>
                <ul>
                    <li><a href="#"><i ></i></a></li>
                    <li><a href="#"><i ></i></a></li>
                    <li><a href="#"><i ></i></a></li>
                </ul>
            </div>
        </div>
        <!--/header menu-->
        <!--sidebar-->
        <div >
            <div >
                <center >
                    <img src="images/img1.jpg" alt="" >
                    <p>User</p>
                </center>
                <li >
                    <a href="#" >
                        <i ></i><span>Dashboard</span>
                    </a>
                </li>
                <li  id="profile">
                    <a href="#profile" >
                        <i ></i><span>Profile <i ></i>
                        </span>
                    </a>
                    <div >
                        <a href="#"><i ></i><span>Picture</span></a>
                        <a href="#"><i ></i><span>Info</span></a>
                    </div>
                </li>
                <li  id="messages">
                    <a href="#messages" >
                        <i ></i><span> Messages<i ></i>
                        </span>
                    </a>
                    <div >
                        <a href="#"><i ></i><span>New</span></a>
                        <a href="#"><i ></i><span>Sent</span></a>
                        <a href="#"><i ></i><span>Spam</span></a>
                    </div>
                </li>
                <li  id="settings">
                    <a href="#settings" >
                        <i ></i><span>Settings<i ></i>
                        </span>
                    </a>
                    <div >
                        <a href="#"><i ></i><span>Password</span></a>
                        <a href="#"><i ></i><span>Language</span></a>
                        <a href="#"><i ></i><span>Spam</span></a>
                    </div>
                </li>
                <li >
                    <a href="#" >
                        <i ></i><span>About</span>
                    </a>
                </li>
            </div>
        </div>
        <!--/sidebar-->
        <!--main container-->
        <div >
            <div >
                <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 >
                <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>

CodePudding user response：

Only wrap title and sub-title inside a div:

<div>
   <div >My <span>Panel</span></div>
   <div >SubTitle</div>
</div>

edited code: https://jsfiddle.net/arman1373/zgra6ctw/