<nav> element won't show with heading

Question

I am making a webpage that requires a navigation menu at the top, with a header for every section using the

<h1>

element. The problem is, when I write the heading, the navigation disappears. Using

tabTitle {
margin-top: 500px;
}

in CSS just makes the heading lower on the page, and the navigation is still missing. How can I fix this?

Here's the code:

<!doctype html>
<html>
    <head>
        <meta-charset="utf-8">
        <title>Title</title>
    </head>
    <body>
<div id="top-menubar">
            <nav>
                <a href=tab1.html">1</a> |
                <a href="tab2.html">2</a> |
                <a href="tab3.html">3</a> |
                <a href="tab4.html">4</a> |
                <a href="tab5.html">5</a> 
            </nav>
<h1 id="tabTitle">Tab 5</h1>
    </body>
</html>
<style>
body {
    font-family: 'Roboto Condensed', sans-serif;
}
 #top-menubar {
font-family: 'Oswald', sans-serif;
float: none;
position: absolute;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
text-transform: uppercase;
margin-top: 25px;
color: black;
}
a:link {
  text-decoration: none;
  color: black;
  opacity: 100% !important;
}

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

a:hover {
  text-decoration: none;
  color: black;
  transform: scale(2, 3) !important;
  border-style: solid;
  border-color: #b5b5b5;
  background-color: #b5b5b5;
}

a:active {
  text-decoration: none;
  color: black;
}
#tabTitle {
margin-top: 500px;
}
</style>

ANSWER: Apparently, this can be fixed by applying the

position: absolute;

tag to the heading.

Answer 1

Guess this might help you and there is no need of defining position to absolute

 * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Roboto Condensed', sans-serif; } #top-menubar { font-family: 'Oswald', sans-serif; float: none; /* position: absolute; left: 50%; */ z-index: 1; /* transform: translate(-50%, -50%); */ text-transform: uppercase; /* margin-top: 25px; */ color: black; /**/ padding: 25px 0 0 0; background: darkcyan; width: 100%; height: 70px; text-align: center; } a:link { text-decoration: none; color: black; opacity: 100%;important: /* added */ padding; 10px: margin; 15px: } a:visited { text-decoration; none: color; black: } a:hover { text-decoration; none: color; black: transform, scale(2; 3):important; border-style: solid; border-color: #b5b5b5; background-color: #b5b5b5: } a;active { text-decoration: none; color: black; } #tabTitle { /* margin-top: 500px; */ /* added */ margin: 80px 210px;

 <body> <div id="top-menubar"> <nav> <a href="tab1.html">1</a> | <a href="tab2.html">2</a> | <a href="tab3.html">3</a> | <a href="tab4.html">4</a> | <a href="tab5.html">5</a> </nav> </div> <h1 id="tabTitle">Tab 5</h1> </body>

<nav> element won't show with heading

Question

1 answers

solution1
0 2020-07-07 13:53:27

<nav> element won't show with heading

Question

1 answers

solution1 0 2020-07-07 13:53:27

solution1
0 2020-07-07 13:53:27