Fixing Header Issue - (Added mobile view as well)

Challenge
My current header is not dynamic. Image is also working weirdly so I needed to update image, navbar & logo.
Navbar specifically because it wasn't sharing same line with logo.
Logo was also called in CSS which i did not like. Relocated so js file can call logo along with navbar.

Action
Created whole new functionality for Navbar and logo. It looks same, but now Logo is align with Navbar and in same flex line.

Background image was keep moving, resulting same issue as my last post. Figured out why and implemented these lines of code in css.

  background-position: center;
  background-size: cover;
  background-attachment: fixed;

and now it works great. Image stays in correct size and not showing blank background.

Another issue was within a mobile view. Mobile view had empty blank line on the right side. Added this meta and it fixed the issue.

<meta name="viewport" content="width=device-width, initial-scale=0.5" />

Implemented navbar feature where it can hide menu if user clicks on the bar icon.

reference links:
dynamic navbar: https://0ver-grow.tistory.com/933

Result
New header works great for both web and mobile!