[ANSWERED] html – How can ı solve “position:fixed” problem?

Question 1

Give your header top: 0; to move it to the top, some height to your list (or calculate it using JavaScript, etc.). Also give your ‘.anan’ margin-top: (height of your header and list to compensate.) Note that there may be a better version that doesn’t require setting height to the list, I just can’t think of it right now 🙂

*{
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
    
        :root{
            --background: rgba(85, 214, 170, .85);
        }
    
        html{
            font-family: sans-serif;
        }
    
        ul{
            list-style-type: none;
        }
    
        a{
            text-decoration: none;
        }
    
        #top-bar{
            top: 0;
            position: fixed;
            background-color: var(--background);
            width: 100%;
            height: 80px;
        }
    
        .container{
            max-width: 1200px;
            margin: 0 auto;
            
            height: 100%;
        }
    
        .list{
            display: flex;
            justify-content: center;
            height: 80px;
        }
    
        .list ul{
            position: absolute;
            top: 100%;
        }
        
        .anan {
            margin-top: 160px;
        }

<!DOCTYPE html>
<html lang="tr" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Nav-Bar</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>

<body>
<nav id="top-bar">
    <div class="container">
        <div class="list">
            <h1 class="logo">Logo</h1>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="anan">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>

</html>

Question 2

when I do “position: fixed”, the new sections or sections that I open below do not automatically come to the bottom line and start from the top of the page. Top-bar has to start directly below. Also, the article I wrote looks like I did not give background color directly. What is the reason for this transparency? How can I solve these two problems?

Thanks in advance for your answers.

*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

:root{
  --background: rgba(85, 214, 170, .85);
}

html{
  font-family: sans-serif;
}

ul{
  list-style-type: none;
}

a{
  text-decoration: none;
}

#top-bar{
  position: fixed;
  background-color: var(--background);
  width: 100%;
  height: 80px;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
}

.list{
  display: flex;
  justify-content: center;
}

.list ul{
  position: absolute;
  top: 100%;
}

<!DOCTYPE html>
<html lang="tr" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Nav-Bar</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
 <nav id="top-bar">
   <div class="container">
   <div class="list">
     <h1 class="logo">Logo</h1>
     <ul>
       <li><a href="">Home</a></li>
       <li><a href="">About</a></li>
       <li><a href="">Blog</a></li>
       <li><a href="">Contact</a></li>
     </ul>
   </div>
   </div>
 </nav>
 <div class="anan">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
</body>

</html>

Bollate

[ANSWERED] html – How can ı solve “position:fixed” problem?

By

Solution 1 :

Problem :

Comments

Comment posted by tacoshy

Comment posted by tacoshy

Comment posted by OyeeBerkay

Comment posted by tacoshy

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate