DEV Community 👩‍💻👨‍💻

Edrick Ee
Edrick Ee

Posted on

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.

Alt Text

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;
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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" />
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Result
New header works great for both web and mobile!

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.