Currently, I am utilizing CSS, HTML, and Javascript in combination with bootstrap features to develop a responsive navbar menu. This menu transforms into a hamburger menu on smaller screens. Clicking the burger menu displays a full-screen overlay with the menu items.
However, there is an issue where the elements within the overlay shift slightly upwards when clicked, causing the "PENELOPE ATKINSON" logo and the burger menu/cross to move up as well.
If anyone has suggestions on how to resolve this issue and prevent the movement of the elements in the overlay menu, it would be greatly appreciated!
Included below are the files I'm working with, alongside the bootstrap files, as I'm unsure of any other method to share them here:
test.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link rel="icon" type="image/png" href="images/browser_logo/browser_logo.png">
</head>
<body>
<!--NAV BAR-->
<div id="myNav" class="overlay">
... (content continues)
...
... (remaining code included for reference)
main.js
... (JavaScript code continued for further references