Hice un sitio web de cartera con HTML, CSS (y Bootstrap) y JavaScript. Mi problema es la barra de navegación pegajosa.

La clase .sticky-top de Bootstrap no funciona. La razón por la que no funciona es porque tengo una línea CSS que establece overflow-x como oculto para el cuerpo. Por alguna razón, mi sitio web tenía un corte en el medio y un espacio en blanco en el lado derecho cuando estaba en un formato móvil, así que cuando busqué una solución, leí para usar la propiedad overflow-x: hidden para solucionarlo (se muestra a continuación).

 html, body { overflow-x: hidden; }

Lo cual solucionó ese problema, pero también pude aislar que es por eso que la barra de navegación no es pegajosa. Obviamente, no puedo cortar mi sitio web por la mitad, así que pensé que tal vez podría probar otra forma de obtener una barra de navegación fija.

Como no puedo usar Bootstraps sticky nav, traté de usar position: sticky en CSS y eso tampoco funcionó.

 #navBar { position: sticky; }

Luego saqué y modifiqué varias versiones del código de la barra de navegación fija para JavaScript estándar (incluidas las pruebas con console.log para ver si estaban activas), y se ejecutaron pero no mantuvieron la barra de navegación fija.

No estoy seguro de cómo obtener overflow-x: hidden para permanecer y obtener una barra de navegación fija. Tal vez si pudiera descubrir cómo arreglar el corte del sitio web en el móvil (por lo tanto, eliminar el problema de desbordamiento-x), entonces podría mantener la parte superior adhesiva de Bootstrap. ¿Alguien tiene alguna idea de por qué me están dando problemas?

Enlace del sitio web: https://1amporkchop.github.io/PortfolioWebsite/

Repo de GitHub con todo el código: https://github.com/1amporkchop/PortfolioWebsite/tree/gh-pages/docs