fixed grid navbar and sidebar

Question

I am working now on a control panel using HTML CSS , I split the page using grid layout, but the problem is that the navbar & sidebar is not fixed I have tried several methods including position: fixed; overflow-y: auto but that didn't work for me.

https://jsfiddle.net/khalil_elyacubi/ckj8bqe9/

picture one

picture two

Answer 1

I hope you are looking for something like this.

 $(".custom-select").each(function() { var classes = $(this).attr("class"), id = $(this).attr("id"), name = $(this).attr("name"); var template = '<div class="' + classes + '">'; template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + "</span>"; template += '<div class="custom-options">'; $(this).find("option").each(function() { template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + "</span>"; }); template += "</div></div>"; $(this).wrap('<div class="custom-select-wrapper"></div>'); $(this).hide(); $(this).after(template); }); $(".custom-option:first-of-type").hover( function() { $(this).parents(".custom-options").addClass("option-hover"); }, function() { $(this).parents(".custom-options").removeClass("option-hover"); } ); $(".custom-select-trigger").on("click", function() { $("html").one("click", function() { $(".custom-select").removeClass("opened"); }); $(this).parents(".custom-select").toggleClass("opened"); event.stopPropagation(); }); $(".custom-option").on("click", function() { $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value")); $(this).parents(".custom-options").find(".custom-option").removeClass("selection"); $(this).addClass("selection"); $(this).parents(".custom-select").removeClass("opened"); $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text()); });

 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@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'); *{ box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; transition: 0.3s; } html,body{ height:100%; }.container{ display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 60px 1fr; grid-template-areas: "sidebar header" "sidebar main"; height: 100%; } /*------------------------------------*/ /* Navbar */ /*------------------------------------*/.navbar{ display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; position: sticky; }.left-nav a{ font-weight: 300; font-size: 13px; text-decoration: none; color: white; margin: 0 10px; }.left-nav a:hover{ color: rgb(187, 187, 187); }.left-nav i:hover{ color: rgb(187, 187, 187); }.navbar{ grid-area: header; background-color: rgba(38, 40, 48, 1); color: white; align-items: center; height: 100%; } /*------------------------------------*/ /* Sidebar */ /*------------------------------------*/.sidebar{ display: flex; flex-direction: column; align-items: center; overflow-y: auto; }.sidebar{ grid-area: sidebar; background-color: rgba(38, 40, 48, 1); color: white; }.logo{ padding: 20px; }.logo img{ width: 100%; }.category-head{ display: flex; flex-direction: row; align-items: flex-start; width: 83%; justify-content: space-between; font-size: small; font-weight: 300; color: rgba(255, 255, 255, 0.452); margin-top: 15%; }.width_element{ width: 81%; }.category-pages, .category-select{ display: flex; flex-direction: column; width: 84%; }.category-select{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; padding: 2.5% 7%; color: #C6C6C7; font-weight: 400; transition: .3s; font-size: 0.93rem; }.category-select:hover{ background-color: rgba(255, 255, 255, 0.06); border-radius: 5px; color: white; }.categorySelected{ color: rgba(255, 185, 97, 1); box-shadow: 0px 0px 21px -13px #ff9d1c6b; background-color: rgba(53, 56, 65, 1); border-radius: 5px; margin-top: 5%; padding: 3.5% 7%; } /*-------select box-------*/ select { z-index: 3; float: left; } /** Custom Select **/.custom-select-wrapper { position: relative; display: inline-block; user-select: none; cursor: pointer; }.custom-select-wrapper select { display: none; }.custom-select { position: relative; display: inline-block; font: 13px/1.5 "Poppins", sans-serif; }.custom-select-trigger { position: relative; /* display: block; */ min-width: 130px; padding: 6% 104px 6% 25px; font-weight: 600; color: #6e7c83; line-height: 50px; background-color: rgba(53, 56, 65, 1); border-radius: 7px; cursor: pointer; transition: all 0.2s ease-in-out; }.custom-select-trigger:hover { -webkit-box-shadow: 0px 10px 50px 0px rgba(70, 73, 83, 0.10); box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10); }.custom-select-trigger:before { position: absolute; display: block; content: ""; width: 1px; height: 50px; top: 3px; right: 50px; margin-top: -3px; transition: all 0.35s ease-out; transform-origin: 50% 0; }.custom-select-trigger:after { position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 50%; right: 20px; margin-top: -3px; border-bottom: 1px solid #c7d1d6; border-right: 1px solid #c7d1d6; transform: rotate(45deg) translateY(-50%); transition: all 0.35s ease-out; transform-origin: 50% 0; }.custom-select.opened.custom-select-trigger:after { margin-top: 3px; transform: rotate(-135deg) translateY(-50%); }.custom-options { position: absolute; display: block; top: 100%; left: 0%; right: 0; width: 100%; margin: 10px 0; border-radius: 5px; box-sizing: border-box; /* box-shadow: 0 2px 1px rgba(0, 0, 0, .1); */ background: rgba(53, 56, 65, 1); transition: all 0.2s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-15px); border: 0; height: 300px; overflow-y: auto; }.custom-select.opened.custom-options { opacity: 1; visibility: visible; pointer-events: all; transform: translateY(-8px); -webkit-box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10); box-shadow: 0px 10px 50px 0px rgb(70, 73, 83,0.10); }.option-hover:before { background: #f9f9f9; }.custom-option { position: relative; display: block; padding: 0 22px; font: 13px/1.5 "Roboto", sans-serif; font-weight: 600; color: #b5b5b5; line-height: 47px; cursor: pointer; transition: all 0.05s ease-in-out; }.custom-option:first-of-type { border-radius: 4px 4px 0 0; border-top-right-radius: 5px; border-top-left-radius: 5px; }.custom-option:last-of-type { border-bottom: 0; border-radius: 0 0 4px 4px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }.custom-option:hover, .custom-option.selection { color: #fff; background-color: rgba(253, 183, 102, 0.1); border: 1px solid rgba(253, 183, 102, 1); } /*-------select box end*-------/ /*------------------------------------*/ /* main content */ /*------------------------------------*/.main{ justify-content: start; display: flex; flex-direction: column; align-items: center; grid-area: main; background-color: rgba(30, 31, 37, 1); color: white; height: 100%; overflow-y: auto; }.cotainer{ margin-top: 2%; width: 90%; height: auto; display: flex; flex-direction: column; align-content: center; }.server-banner{ width: 100%; height: 250px; /* background: url(./baner1.png) no-repeat; */ filter: blur(5px); border-radius: 10px; /* background-size: cover; */ overflow: hidden; }.server-banner img{ width: 100%; position: relative; top: -140px; opacity: 25%; z-index: -1; }.server{ display: flex; align-items: center; margin-left: 3%; position: relative; bottom: 55px; }.server img{ width: 9%; }.server-members{ padding-left:2%; } /*------------------------------------*/ /* Scroll Bar */ /*------------------------------------*/::-webkit-scrollbar { width: 10px; } /* Track */::-webkit-scrollbar-track { background: transparent; } /* Handle */::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */::-webkit-scrollbar-thumb:hover { background: #555; }

 <,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="style:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min:css"> <script defer src="https.//use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script> <title>grid dashboard</title> </head> <body> <div class="container"> <div class="navbar"> <div class="left-nav"> <a href="#"><i class="fas fa-plus"></i> Support server</a> <a href="#"><i class="fas fa-code"></i> Commands</a> </div> <div class="right-nav">user.icos</div> </div> <div class="sidebar"> <div class="logo"><img src="./logo.png" alt="" srcset=""></div> <select name="potencial" id="potencial" class="custom-select sources" placeholder="Ticket Manager"> <option value="DH" selected><img src="server-logo.png" alt="server-logo"> Ticket Manager</option> <option value="A">Ticket Manager</option> <option value="B">Ticket Manager</option> <option value="C">Ticket Manager</option> <option value="D">Ticket Manager</option> <option value="D">Ticket Manager</option> <option value="D">Ticket Manager</option> <option value="D">Ticket Manager</option> <option value="D">Ticket Manager</option> <option value="D">Ticket Manager</option> <option value="D"><i class="fas fa-cog"></i>Ticket Manager</option> </select> <div class="category-head">General <i class="fas fa-angle-down"></i></div> <div class="category-pages"> <div class="category-select categorySelected"><div class="title">Overview</div> <div class="icon"><i class="fas fa-chart-bar"></i></div></div> <div class="category-select "><div class="title">Premium</div> <div class="icon"><i class="fas fa-crown"></i></div></div> </div> <div class="category-head width_element">Customise bot<i class="fas fa-angle-down"></i></div> <div class="category-pages"> <div class="category-select"><div class="title">Settings</div> <div class="icon"><i class="fas fa-cog"></i></div></div> <div class="category-select"><div class="title">Pannels</div> <div class="icon"><i class="fas fa-paper-plane"></i></div></div> <div class="category-select"><div class="title">Logs</div> <div class="icon"><i class="fas fa-history"></i></div></div> <div class="category-select "><div class="title">Archived tickets</div> <div class="icon"><i class="fas fa-folder-open"></i></div></div> </div> </div> <div class="main"> <div class="cotainer"> <p>content</p> <div class="server-info"> <div class="server-banner"> <img src="./baner1.png" alt=""></div> <div class="server"> <img src="./server-logo-lg:png" alt=""> <div class="server-members"> <div class="server-name">Ticket Manager</div> <div class="server-id">ID. 123456789</div> </div> </div> </div> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> <h1>some text here</h1> </div> </div> </div> <script src="./script.js"></script> </body> </html>