Why ::webkit is not working

HTML & CSS
1 
<!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="newstyle.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/font-awesome.min.css"> 
    <script>"bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"</script>
    <title>Document</title>
</head>
<body>
<section>
   <div id="mySidenav" class="sidenav">
      <p class="logo"><span>Garbage </span>Management</p>
      <a href="dashboard.php" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Dashboard</a>
      <a href="requests.php" class="icon-a"><i class="fa fa-list icons"></i>&nbsp;&nbsp;Lodge Requests</a>
      <a href="complaints.php" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Lodge Complaints</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Request history</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Complaint history</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Search</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Payments</a>
      <a href="signout.php?user=<?php echo $_SESSION['username']; ?>" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Log out</a>
   </div>
   <div id="main">
      <div class="head">
        <div class="col-div-6">
            <span style="font-size: 30px; cursor: pointer;color: white;" class="nav"> &#9776; Dashboard</span> 
            <span style="font-size: 30px; cursor: pointer;color: white;" class="nav2"> &#9776; Dashboard</span>
        </div>
        <div class="col-div-6">
           <div class="profile"> 
            <p ><span>Welcome<?php echo isset($_SESSION["username"]) ? $_SESSION["username"] : "user"; ?></span></p>
           </div>
        </div>
        
      </div>
   </div>
<script src="scripts/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".nav").click(function(){
        $("#mySidenav").css('width','70px');
        $("#main").css('margin-left','70px');
        $(".logo").css('visibility','hidden');
        $(".logo span").css('visibility','visible');
        $(".logo span").css('margin-left','-10px');
        $(".icon-a").css('visibility','hidden');
        $(".icons").css('visibility','visible');
        $(".icons").css('margin-left','-8px');
        $(".nav").css('display','none');
        $(".nav2").css('display','block');
    });
    $(".nav2").click(function(){
        $("#mySidenav").css('width','300px');
        $("#main").css('margin-left','300px');
        $(".logo").css('visibility','visible');
        $(".logo span").css('visibility','visible');
        $(".icon-a").css('visibility','visible');
        $(".icons").css('visibility','visible');
        $(".nav").css('display','block');
        $(".nav2").css('display','none');
    });
    });
</script>
</section>   
</body>
</html>

::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background:#f1f1f1;
}
::-webkit-scrollbar-thumb{
    background: #888;
}
::-webkit-scrollbar-thumb:hover{
    background:#555;
}

This webkit is not working in the above dashboard

2

I moved this to the HTML/CSS forum as it’s more appropriate here.

I don’t understand what you mean about it not working. This codepen shows it working. I had to add more page content to show the page scrollbar though. Do you not see a scrollbar, and are assuming that the code doesn’t work? You need to be more descriptive. What doesn’t work?

1 Like
3

It’s not supported in Firefox if that’s what you were testing on?

1 Like