I've built my website from scratch using HTMl and CSS. I want to have separated sections. A navigation bar and a main section. The navigation bar should scroll with the window when scrolling on the y axis. I managed to do that with CSS "position: fixed;". But when scrolling the x axis the navigation bar moves with on the x axis overlapping the main section. When the window gets resized and it's getting too small to display everything properly, the nav bar overlaps the main section.
My goal is now to get the navigation bar fixed on the y axis but not on the x axis. And when the window gets too small to display everything at once, the nav bar should disappear and reappear when the window gets bigger again.
You can take a look at my website here: https://f3mic.github.io/
I cannot exactly tell what've done to try to solve this problem.
reprex
html {
scroll-behavior: smooth;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.item-sidebar {
position: fixed;
top: 10%;
font-size: 90%;
}
.item-main {
width: 80%;
max-width: 80%;
margin-left: 15%;
font-size: 110%;
hyphens: auto;
text-align: justify
}
body {
background-color: #1f1f1f;
color: white;
font-weight: normal;
font-family: monospace;
}
ol {
margin-left: -11%;
counter-reset: item;
list-style-type: none;
}
ol.first {
margin-left: -10%;
}
ol li::before {
counter-increment: item;
content: counters(item, ".") ". ";
}<body>
<div class="grid-container">
<div class="item-sidebar">
<ol>
<li><a href="index.html#intro">Introduction</a></li>
<li><a href="index.html#prep">Preparations</a></li>
<ol class="first">
<li><a href="index.html#Fallout2_Installation">Installation - Fallout2</a></li>
<li><a href="index.html#Fallout2_.dat_files">File handling - .dat files</a></li>
<li><a href="index.html#Tools_Data_Exploring">Tools - .dat Extractor</a></li>
<li><a href="index.html#Extracting_.dat_files">Extracting - .dat files</a></li>
<li><a href="index.html#Tools_Scripting">Tools - Scripting</a></li>
<li><a href="index.html#Config_sFall_Script_Editor">Config - sFall Script Editor</a></li>
<li><a href="index.html#Tools_Mapping">Tools - Mapping</a></li>
<li><a href="index.html#Config_BIS_Mapper">Config - BIS Mapper</a></li>
</ol>
<li><a href="index.html#mapping">Mapping</a></li>
<ol class="first">
<li><a href="index.html#BIS_Mapper_explained">BIS Mapper explained</a></li>
<ol>
<li><a href="index.html#hotkeys">Hotkeys</a></li>
</ol>
<li><a href="index.html#build_map">How to build a map</a></li>
<ol>
<li><a href="index.html#FloorWall">Floors and walls</a></li>
<li><a href="index.html#SceneryCritter">Scenery and critters</a></li>
<li><a href="index.html#LadderStair">Ladders and stairs</a></li>
<li><a href="index.html#ScrollBlocker">Scroll blocker</a></li>
<li><a href="index.html#MapExit">Map exits</a></li>
<li><a href="index.html#Worldmap">Worldmap</a></li>
</ol>
<li><a href="index.html#New_Critter">Make new prototype</a></li>
</ol>
<li><a href="index.html#basic">Scripting (Basics)</a></li>
<ol class="first">
<li><a href="index.html#ssl">Scripting language</a></li>
<li><a href="index.html#script">Script</a></li>
<li><a href="index.html#header">Header File</a></li>
<li><a href="index.html#define">Define</a></li>
<li><a href="index.html#procedure">Procedure</a></li>
<li><a href="index.html#function">Function</a></li>
<li><a href="index.html#argument">Argument</a></li>
<li><a href="index.html#variable">Variable</a></li>
<li><a href="index.html#constant">Constant</a></li>
<li><a href="index.html#macro">Macro</a></li>
<li><a href="index.html#operator">Operator</a></li>
<li><a href="index.html#statement">Statement</a></li>
<li><a href="index.html#semicolon">Semicolon</a></li>
</ol>
<li><a href="index.html#advanced">Scripting (Advanced)</a></li>
<ol class="first">
<li><a href="index.html#compiling">Compiling</a></li>
<ol>
<li><a href="index.html#Scripts.h">SCRIPTS.H</a></li>
</ol>
<li><a href="index.html#TestScript">Test your script</a></li>
<ol>
<li><a href="index.html#Scripts.lst">SCRIPTS.LST</a></li>
</ol>
<li><a href="index.html#AssignScript">Assign script to object</a></li>
<li><a href="index.html#dialog">Dialog</a></li>
<li><a href="index.html#pipboy">Add quest to pipboy</a></li>
<li><a href="index.html#MakeTrader">Make trader</a></li>
<ol>
<li><a href="index.html#StoreRestock">Store restock</a></li>
</ol>
</ol>
<li><a href="index.html#complex">Scripting (Complex)</a></li>
<ol class="first">
</ol>
<li><a href="index.html#sFall">Scripting (SFall) (Optional)</a></li>
<ol class="first">
</ol>
<li><a href="index.html#art">Art (Optional)</a></li>
<ol class="first">
<li><a href="index.html#talkhead">Talking Heads</a></li>
<!--<li><a href="index.html#tiles">Make new tiles</a></li>
<li><a href="index.html#walls">Make new walls</a></li>
<li><a href="index.html#fot">FOT Critters In FO2</a></li>-->
</ol>
<li><a href="index.html#addendum">Addendum</a></li>
<li><a href="index.html#source">Sources</a></li>
</ol>
</div>
<div class="item-main">
<header>
<h1>Fallout 2 Modding Guide</h1>
<br>
<p>Written by Femic et al.</p>
<img src="images\Header\Please_stand_by_Fallout.jpg" alt="Please stand by">
<p><em>Shot a child in the face after he pickpocketed me. Turned the whole town hostile. Ran away to New Reno. Became a Pornstar.
<br>
Fallout 2 in a nutshell.
<br>
11/10</em></p>--Rat Prik (Steam review)
</header>
<br>
<hr>
<hr>TLDR: I've put together a codepen to give you a demo that you can build upon. I've done a couple of alternate solutions. One that makes use of position: fixed and one that makes use of your grid container's grid-template-columns value.
Other stuff that's probably worth a read:
Make navigation bar disappear when window gets smaller
This can be done using media queries. Basically, you will give your site / sidebar different styles based on the width of the user's viewport. That will allow you to use CSS to hide your sidebar on small screens / narrow browser windows and make it show on larger screens. Of course you'll probably want a way to show it whilst it's hidden too.
Get the navigation bar fixed on the y axis
Using position: fixed as you have done is a perfectly fine way of achieving your goal however it does render the .grid-container unnecessary as position: fixed will remove the element from the document flow. More information on CSS positioning.
If you use this solution you will need to add some padding (margin could be used instead) to your main content to prevent the sidebar overlapping it.
If you want to keep using your grid container you can use position:sticky on .item-sidebar instead. Doing so will keep the sidebar in the first column of the grid container as you originally intended but allow you to keep it within the viewport in a similar manner to position: fixed.
A general remark regarding your CSS is to not use % as a unit quite as much as you have. Try to pick the most appropriate unit for the job. The width of .item-main using % as your unit is fine, less so for the margins on the lists. It's not that % for list margins is wrong, there's just others that would generally be considered more appropriate (e.g. rem). More information on CSS units.
Enjoy making the rest of your site.