I made a portfolio website with HTML, CSS (and Bootstrap), and JavaScript. My issue is the sticky navigation bar.

The .sticky-top class from Bootstrap does not work. The reason it does not work is because I have a CSS line that sets overflow-x as hidden for the body. For some reason my website had a cut off in the middle and whitespace on the right side when in a mobile format, so when I looked for a solution I read to use the overflow-x: hidden property to fix it (shown below).

html,
body {
  overflow-x: hidden;
}

Which it did fix that issue, but I was also able to isolate that this is why the navbar is not sticky. Obviously I cannot have my website cut in the middle so I thought maybe I could try another way to get a sticky navbar.

Since I can't use Bootstraps sticky nav, I tried to use position: sticky in CSS and that did not work either.

#navBar {
  position: sticky;
}

Then I pulled and altered multiple versions of sticky navbar code for vanilla JavaScript (including testing with console.log to see if they were active), and they ran but did not keep the navbar sticky.

I am not sure how to get both the overflow-x: hidden to stay and get a sticky navbar. Maybe if I could figure out how to fix the website getting cut off on mobile (therefore remove the overflow-x issue), then I would be able to keep the Bootstrap sticky-top. Does anyone have any ideas for why either are giving me trouble?

Website link: https://1amporkchop.github.io/PortfolioWebsite/

GitHub repo with all the code: https://github.com/1amporkchop/PortfolioWebsite/tree/gh-pages/docs