I have created a container for the header: <header-container>In this container, there is a nav bar, the logo of my website and signup button which links to another html page.
However, when I scroll down the page, the sign up button scrolls down with it which interferes with the visuals of other aspects of the page.
I removed the position:fixed from signup-container, however it impacted the positioning of the navbar and the signup container. I then tried to move the values of margin-left, top etc to see if it would make any difference, it didn't. I went to inspect it via Google Chrome and the inspection says that the position:static property prevents top from having an effect and that I should try setting position to something other than static.
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 5px; background-color: #fff;}/* Logo formatting */.logo-container { text-align: left; padding: 10px;}.logo-container img { width: 150px; height: auto;}nav { text-align: center; flex: 1; margin-left: -180px;}nav a { color: #4a4a4a; text-decoration: none; padding: 14px 16px; display: inline-block; font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: bold; position: relative;}nav a::before { content: ''; position: absolute; top: 80%; left: 0; width: 0; height: 3px; background: #383838; transition: width 0.3s ease; /* Added transition for a smoother effect */}nav a:hover::before { width: 100%;}.signup-container { position: fixed; top: 15px; right: 20px;}/* Sign up button on the top right */.btn { width: 150px; height: 40px; color: #fff; background: #000; font-size: 15px; font-family: 'Montserrat', sans-serif; text-decoration: none; margin: 50px; margin-top: 35px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 0 #A6A6A6; transition: 0.5s;}.btn:hover { box-shadow: 8px 10px 0 #A6A6A6;}<div class="header-container"><div class="logo-container"><img src="img/LUXSC2.png" alt="Page Logo"></div><nav><a href="index.html">Home</a><a href="aboutus.html">About Us</a><a href="values.html">Values</a><a href="facts.html">Facts</a></nav><div class="signup-container"><a href="logInPage.html" class="btn">Sign Up</a></div></div>