Position:fixed in topbar disables Javascript

HTML-CSS
1

Hi

So I have been trying to make a top navigation bar (which is now working). But when I pasted an H1 with a headline just below the body-tag’s beginning, the topnav got sent down a bit and lost its margin-top:0px; which I have written in it.

It then looks like this:

stuff
stuff1106×358 36.3 KB

So despite margin-top:0px; there is a space between the topnav and the ceiling at the very top.

Now when I changed to position:absolute; or position: fixed; for the topnav, to close the space, the javascript in the scrolldown stopped working. So how do I close that space without having the Javascript-scroll stop working?

2

We can only guess without seeing your code. The best thing would be to put all of the code (HTML/CSS/JS) somewhere where we can see it and then send us the link.

3

Here is HTML-file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FROGTIME</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <div class="frogline">>Everything frog</div>

    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>
<script> 
$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});
</script> 

    <link rel="stylesheet" href="css/stylesheet.css">
    <div id="header"></div>

</head>
<body>
    <h1 class="Froglegs">FROGTIME</h1>



    <p>Frogs like to eat insects when they are hungry</p>
    <div class="container">
        <header>
        <img src="images/Frog.svg" alt="23andfour logo" class="logo" id="logo">

        <nav>
           <a href="#" class="hide-desktop">
               <img src="images/ham.svg" alt="toggle menu" class="menu" id="menu">
           </a>
            <ul class="show-desktop hide-desktop" id="nav">
                <li id="exit" class="exit-btn hide-desktop"><img src="images/exit.svg" alt="exit menu"></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li> 
                <li><a href="#">Contact</a></li> 
            </ul>
        </nav>
    </header>
    <section class="Boxen">
        <h1 class="h1-z">Frogs love to swim slowly during the day when the fish are less active</h1>
        <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="images/Frog.svg" alt="server graphic" width="100" height="100" class="Frog">

        <p class="subhead">Frogs also like to sleep</p>
<button id="Frogbutton" type="button">Click for frog  sound</button>    
</section>
    </div>

    <img src="images/FrogLogo.jpg" alt="server graphic" class="server">



    <div class="blue-container">
        <div class="container">
            <ul>
                <li>
                    <p>Frogs like swimming</p>
                </li>
                <li>
                    <p>Frogs like swimming</p>
                </li>
                <li><p>Frogs like swimming</p></li>
            </ul>
        </div>
    </div>

    <div class="gray-container">
        <div class="container">
            <ul>
                <li>

                </li>
            </ul>
        </div>
    </div>

    <p id="demo">This site is about frogs</p>
<div>
    <button onclick="myFunction()" class="Frogs">What do frogs like?</button>
    <p id="Frog1"></p>
    </div>

    <div id="footer"></div>

    <script>
        function bigImg(x) {
  x.style.height = "100px";
  x.style.width = "100px";
}

function normalImg(x) {
  x.style.height = "160px";
  x.style.width = "160px";
}
function myFunction() {
  var str = "Frogs like to chill out";
  var result = str.fontcolor("darkgreen");
  document.getElementById("Groda").innerHTML = result;
}
document.getElementById("demo").style.color= "green";


    </script>

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap');

/* Custom Properties */

* {
  box-sizing: border-box;
}

h1:hover{
    color:red;
    text-shadow: red 2px 2px 10px;
}

body {
    font-family: 'Montserrat', 'sans-serif';
    background-image: linear-gradient(45deg, white, #e6e6ff,orange, green);
  }

body p{
  font-weight: bold;
}


p:first-child {
    color:green;
    text-shadow: blue 2px 2px 10px;
}

.text {
  color: #3d9801;
  text-shadow: orange 2px 2px 2px;}

h1 {
  color: #3d9801;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: bold;
  margin-left: 5px;
  font-size: 43px;
  text-shadow: black 2px 2px 10px;
}

h1 a{
  color: #196719;
  font-family: 'Montserrat', 'sans-serif';
  font-weight: bold;
  margin-left: 5px;
  font-size: 43px;
  text-shadow: black 2px 2px 10px;
}

.boxen{
  z-index: -4;
}

.boxen:first-child{
  z-index: -1;
}


.server {
  object-fit: cover;
position: absolute;
top: 340px;
right: 15px;
left: 250px;
width:24%;
height:29.3%;
border-radius: 2px;
z-index: -2;
margin-left:10;
}

.topmenu {
  overflow: hidden;
  background-color: #3d9801;
  padding-top: 5px;
  padding-bottom: 0px;
  height: 36px;
  margin-top: 0px;
  background-image: linear-gradient(to right, #3d9801 ,#3d9801, #3d9801, white);
}

.Froglegs {
  position: absolute;
  margin-right: 25px;
  margin-left: 1000px;
  margin-top: 65px;
  font-size: 50px;
}

.topmenu a {
  color: #f2f2f2;
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  margin-left: 90px;
  margin-top: 10px;
  margin-bottom: 0px;
  bottom: 14px;
  font-family: 'Montserrat';
}

.Frog{
  position: absolute;
  top:-100px;
  margin-top:0px;
  margin-bottom: 20px;
  padding-top: 0px;
}

li {
  float: left;
  font-weight: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #196719;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top: 5px;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
  padding-bottom: 20px;
  padding: 12px 16px;
  z-index: 2;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: #0300ea;
  text-shadow: 0px 0px 1px orangered;
}



.topmenu a:hover {
  background-color: #ddd;
  color: black;
  text-shadow: none;
}


/*.logo {
  position: absolute;
  left: 0px;
  top: 110px;
  bottom: 0px;
  z-index: -3;
  object-fit: cover;
}*/

.logo {
object-fit: cover;
position: absolute;
top: 36px;
right: 150px;
left: 0px;
width:24%;
height:29.3%;
z-index: -3;
border-radius: 2px;
}

.butt {
  width: 2px;
  border: 2px solid green;
  border-radius: 40%;
}

ul {
  font-weight: normal;
}

/* Here the footer begins */

*,*:before,*:after{
  box-sizing: border-box;
}

body{
  font-family: Montserrat;
  margin: 0;
  font-size: 14px;
  display: grid;
}

main{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 3.8;
font-size:80px;
text-transform: uppercase;
font-weight: bold;
}

footer{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
flex-flow: row wrap;
padding: 50px;
color: #fff;
background-color: #3d9801;
display: flex;
flex-direction:row;
margin: auto;
}

.footer > *{
  flex: 1 100%;
}

.footer-left{
  margin-right: 1.25em;
  margin-bottom: 2em;
}

.footer-left img{
  width: 50%;
}

h2{
  font-weight: 400;
  font-size: 17px;
}

.footer ul{
  list-style:none;
  padding-left:0;
}
.footer li{
  line-height:2em;
}
.footer a{
  text-decoration: none;
}
.footer-right{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}
.footer-right > * {
  flex:1 50%;
  margin-right: 1.25em;
}
.box a{
  color: #fff;;
}
.footer-bottom{
  text-align:center;
  color: #fff;
padding-top: 50px;
}
.footer-left p{
  padding-right: 20%;
  color: #fff;
}
.socials a{
  background: #364a62;
  width:40px;
  height:40px;
  display:inline-block;
  margin-right:10px;
}
.socials a i{
  color: #e7f2f4;
  padding: 10px 12px;
  font-size: 20px;
}

@media screen and (min-width: 600px){
  .footer-right > *{
      flex:1;
  }
  .footer-left{
      flex:1 0px;
  }
  .footer-right{
      flex:2 0px;
  }
}
@media screen and (max-width: 600px){
  .footer{
      padding:15px;
  }
  main{
      font-size:55px;
  }
}
4

you have at least one syntax error: you can’t put a div inside your head, it may even be that that is causing the space

5

Ok

Which other errors are there?

The code was confusing me. I did not even realize that div was in my head.

6

there is a second div in your head

you could test your html file with this:

7

Aha great thanks. That worked for the weird space when I removed that.

Does that adress work for projects that are on the personal computer as well?

Also, do you have any idea why there is space between the scrolldown and the topnav when hovering there? That did not diappear. I wrote about it here:

1 Like
8

no, but there are different methods to have your code testeed, inclduing uplaoding a file and just pasting in code

Everything else, I don’t know, I have not set up your code to see how it renders

9

Ok where can I upload a file? That same site? :+1:

10

look carefully, there are the options for how to validate

11

ok I will check it out. :+1: