Home > Blockchain >  Header Menu Blocking Main Section on Website
Header Menu Blocking Main Section on Website

Time：05-24

I am practising HTML and CSS with a test page that has 5 sections (you can see them in the main menu on top). As you can see, the menu stays fixed in that position as you scroll down through the page. However, when going to different sections (such as contact, or tours), you can see the fixed menu, but the main section such as the tables are not positioned there and are kind of covered by said menu. How can I fix the tables or content so that it is separated from it as in the home page (index.html) I cant seem to fix the code in those sections:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Green Day</title>
</head>

<body>
    <header>
        <div >
            <!-- Contiene Menú, Logo y Links -->
            <div>
                <!-- Menú -->
                <nav>
                    <ul >
                        <li><a href="./tours.html">Tours</a></li>
                        <li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
                        <li><a href="./contact.html">Contact</a></li>
                        <li><a href="./about.html">About</a></li>
                    </ul>
                </nav>
            </div>
            <div >
                <!-- Logo GreenDay -->
                <a href="./index.html"><img src="./img/logo.jpg" alt="Logo"></a>
            </div>
            <div>
                <nav>
                    <!-- Link a redes -->
                    <ul >
                        <li><a href="https://www.facebook.com/GreenDay"><img src="./img/faceTop.jpg" alt="Facebook"></a>
                        </li>
                        <li><a href="https://www.instagram.com/greenday/?hl=en"><img src="./img/igTop"
                                    alt="Instagram"></a></li>
                        <li><a
                                href="https://twitter.com/GreenDay?ref_src=twsrc^google|twcamp^serp|twgr^author"><img
                                    src="./img/twTop" alt="Twitter"></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main>
        <section >
            <p>UPCOMING DATES</p>
            <table id="customers">
                <tr>
                    <th>Date</th>
                    <th>Country</th>
                    <th>Tickets</th>
                </tr>
                <tr>
                    <td>Wed, AUG 8</td>
                    <td>Austin, TX</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Thu, AUG 22</td>
                    <td>Salt Lake City, UT</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Sat, SEP 1</td>
                    <td>Las Vegas, NV</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Mon, SEP 10</td>
                    <td>California, LA</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Thu, SEP 14</td>
                    <td>Guadalajara, MX</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Sat, OCT 1</td>
                    <td>Manhattan, NY</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Mon, OCT 3</td>
                    <td>Long Island, NY</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Sat, OCT 8</td>
                    <td>Brooklyn, NY</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Mon, OCT 10</td>
                    <td>Chicago, IL</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Tue, OCT 11</td>
                    <td>Chicago, IL</td>
                    <td>BUY</td>
                </tr>
            </table>
        </section>
    </main>
    <footer >
        <div >
            <div>
                <a href="">Terms and Conditions</a>
            </div>
            <div>
                <a href="">Privacy and Policy</a>
            </div>
            <div>
                <ul >
                    <li><a href="https://www.facebook.com/GreenDay"><img src="./img/face.png" alt="F"></a></li>
                    <li><a href="https://www.instagram.com/greenday/?hl=en"><img src="./img/ig.png" alt="I"></a></li>
                    <li><a href="https://twitter.com/GreenDay?ref_src=twsrc^google|twcamp^serp|twgr^author"><img src="./img/tw.png" alt="T"></a></li>
                    <li><a href="https://www.youtube.com/channel/UCqC_GY2ZiENFz2pwL0cSfAw"><img src="./img/yt2.png" alt="Y"></a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>

</html>

*{
    margin: 0;
    padding: 0;
    background-color: black;
}

@font-face {
    font-family: 'CAMistery';
    src: url("../fonts/CAMysteryGirl-Regular.ttf") format('truetype');
}

/* Comienza Header */
header{
    padding: 20px;
    z-index: 1;
    position: fixed;
    width: 98%;
    top: 0;
}

.flexPadreTop{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.flexPadreTop div{
    width: 33vw;
}

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

.divlogo img{
    margin-right: 12px;
}

/* Menu */
.menu{
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.menu li{
    list-style: none;
    padding: 15px;
    background-color: black;
}

.menu a{
    color: white;
    text-transform: none;
    text-decoration: none;
    font-family: "CAMistery";
    font-size: 30px;
    background-color: transparent;
}

.menu li:hover, main a:hover{
    background-color: rgb(143, 25, 25);
}

/* Link a redes */
.redesTop{
    display: flex;
    flex-wrap: nowrap;
    justify-content: right;
}

.redesTop li{
    margin: 5px;
    list-style: none;
}

.redesTop li img{
    height: 45px;
}
/* Termina Header */



/* index */

/* Comienza Main */

/* Portada */
.greenRed{
    width: 100%;
    transition: transform 0.5s linear;
    padding-bottom: 30px;
}

.greenRed:hover{
    transform: scale(1.1);
}

/* Música */
.musica{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-top: 5px dotted rgb(143, 25, 25);
    border-bottom: 5px dotted yellow;
    padding: 30px 0px;
}

.greenMusica{
    margin-left: -200px;
}

.musicaListen{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin-left: -100px;
    height: 300px;
}

.musicaListen p{
    text-align: center;
    color: white;
    font-family: "CAMistery";
    font-size: 50px;
}

.musicaBoton{
    background-color: rgb(143, 25, 25);
    border-radius: 25px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 4px 2px;
    cursor: pointer;
    width: 150px;
}

/* Videos */

.videos{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-top: none;
    border-bottom: none;
    padding: 30px 0px;
    color: white;
    font-family: "CAMistery";
    font-size: 50px;
}

.videomp4{
    align-items: center;
    margin-top: 50px;
}

/* Termina Main */
/* Footer */

.divfooter{
    display: flex;
    justify-content: space-evenly
}

.divfooter div{
    padding: 20px;
}

.divfooter div a{
    color: white;
    font-family: calibri;
    text-decoration: none;
}

.footerRedes{
    display:flex;
    align-items:center;
    flex-direction:row;
    margin: 0 auto;
    justify-content: space-evenly;
}

.footerRedes ul li{
    list-style: none;
    text-decoration: none;
    text-transform: none;
}

/* tours */

/*  */

.tours{
    display: flex;    
}

#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    color: white;
  }
  
  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 35px;
    padding-bottom: 35px;
    border-top: 2px;
    text-align: left;
    background-color: #9E1B2F;
    color: white;
  }

Here's a JSFiddle:

https://jsfiddle.net/xeactdmy/

CodePudding user response：

To fix this, you can do few things.

One method is, you add a property margin-top to your main section with the value equal to height of navbar.

Or you can just remove position fixed from navbar and create sticky navbar instead of fixed navbar. You will surely find code related to that on any snippet website.

CodePudding user response：

I believe you should work on your whole code completely, because it looks a bit messy. But if you want only this thing fixed, you only need to add a selector on your css margin and give it margin-top: 200px. You have the code here on snippet in case you have any doubt on how to do it.

*{
    margin: 0;
    padding: 0;
    background-color: black;
}

main {
 margin-top: 200px;
}

@font-face {
    font-family: 'CAMistery';
    src: url("../fonts/CAMysteryGirl-Regular.ttf") format('truetype');
}

/* Comienza Header */
header{
    padding: 20px;
    z-index: 1;
    position: fixed;
    width: 98%;
    top: 0;
}

.flexPadreTop{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.flexPadreTop div{
    width: 33vw;
}

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

.divlogo img{
    margin-right: 12px;
}

/* Menu */
.menu{
    display: flex;
    justify-content: left;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.menu li{
    list-style: none;
    padding: 15px;
    background-color: black;
}

.menu a{
    color: white;
    text-transform: none;
    text-decoration: none;
    font-family: "CAMistery";
    font-size: 30px;
    background-color: transparent;
}

.menu li:hover, main a:hover{
    background-color: rgb(143, 25, 25);
}

/* Link a redes */
.redesTop{
    display: flex;
    flex-wrap: nowrap;
    justify-content: right;
}

.redesTop li{
    margin: 5px;
    list-style: none;
}

.redesTop li img{
    height: 45px;
}
/* Termina Header */



/* index */

/* Comienza Main */

/* Portada */
.greenRed{
    width: 100%;
    transition: transform 0.5s linear;
    padding-bottom: 30px;
}

.greenRed:hover{
    transform: scale(1.1);
}

/* Música */
.musica{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-top: 5px dotted rgb(143, 25, 25);
    border-bottom: 5px dotted yellow;
    padding: 30px 0px;
}

.greenMusica{
    margin-left: -200px;
}

.musicaListen{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin-left: -100px;
    height: 300px;
}

.musicaListen p{
    text-align: center;
    color: white;
    font-family: "CAMistery";
    font-size: 50px;
}

.musicaBoton{
    background-color: rgb(143, 25, 25);
    border-radius: 25px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 4px 2px;
    cursor: pointer;
    width: 150px;
}

/* Videos */

.videos{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-top: none;
    border-bottom: none;
    padding: 30px 0px;
    color: white;
    font-family: "CAMistery";
    font-size: 50px;
}

.videomp4{
    align-items: center;
    margin-top: 50px;
}

/* Termina Main */
/* Footer */

.divfooter{
    display: flex;
    justify-content: space-evenly
}

.divfooter div{
    padding: 20px;
}

.divfooter div a{
    color: white;
    font-family: calibri;
    text-decoration: none;
}

.footerRedes{
    display:flex;
    align-items:center;
    flex-direction:row;
    margin: 0 auto;
    justify-content: space-evenly;
}

.footerRedes ul li{
    list-style: none;
    text-decoration: none;
    text-transform: none;
}

/* tours */

/*  */

.tours{
    display: flex;    
}

#customers {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    color: white;
  }
  
  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 35px;
    padding-bottom: 35px;
    border-top: 2px;
    text-align: left;
    background-color: #9E1B2F;
    color: white;
  }
  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Green Day</title>
</head>

<body>
    <header>
        <div >
            <!-- Contiene Menú, Logo y Links -->
            <div>
                <!-- Menú -->
                <nav>
                    <ul >
                        <li><a href="./tours.html">Tours</a></li>
                        <li><a href="https://greenday.lnk.to/fatherofall">Listen to Music</a></li>
                        <li><a href="./contact.html">Contact</a></li>
                        <li><a href="./about.html">About</a></li>
                    </ul>
                </nav>
            </div>
            <div >
                <!-- Logo GreenDay -->
                <a href="./index.html"><img src="./img/logo.jpg" alt="Logo"></a>
            </div>
            <div>
                <nav>
                    <!-- Link a redes -->
                    <ul >
                        <li><a href="https://www.facebook.com/GreenDay"><img src="./img/faceTop.jpg" alt="Facebook"></a>
                        </li>
                        <li><a href="https://www.instagram.com/greenday/?hl=en"><img src="./img/igTop"
                                    alt="Instagram"></a></li>
                        <li><a
                                href="https://twitter.com/GreenDay?ref_src=twsrc^google|twcamp^serp|twgr^author"><img
                                    src="./img/twTop" alt="Twitter"></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main>
        <section >
            <p>UPCOMING DATES</p>
            <table id="customers">
                <tr>
                    <th>Date</th>
                    <th>Country</th>
                    <th>Tickets</th>
                </tr>
                <tr>
                    <td>Wed, AUG 8</td>
                    <td>Austin, TX</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Thu, AUG 22</td>
                    <td>Salt Lake City, UT</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Sat, SEP 1</td>
                    <td>Las Vegas, NV</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Mon, SEP 10</td>
                    <td>California, LA</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Thu, SEP 14</td>
                    <td>Guadalajara, MX</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Sat, OCT 1</td>
                    <td>Manhattan, NY</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Mon, OCT 3</td>
                    <td>Long Island, NY</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Sat, OCT 8</td>
                    <td>Brooklyn, NY</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Mon, OCT 10</td>
                    <td>Chicago, IL</td>
                    <td>BUY</td>
                </tr>
                <tr>
                    <td>Tue, OCT 11</td>
                    <td>Chicago, IL</td>
                    <td>BUY</td>
                </tr>
            </table>
        </section>
    </main>
    <footer >
        <div >
            <div>
                <a href="">Terms and Conditions</a>
            </div>
            <div>
                <a href="">Privacy and Policy</a>
            </div>
            <div>
                <ul >
                    <li><a href="https://www.facebook.com/GreenDay"><img src="./img/face.png" alt="F"></a></li>
                    <li><a href="https://www.instagram.com/greenday/?hl=en"><img src="./img/ig.png" alt="I"></a></li>
                    <li><a href="https://twitter.com/GreenDay?ref_src=twsrc^google|twcamp^serp|twgr^author"><img src="./img/tw.png" alt="T"></a></li>
                    <li><a href="https://www.youtube.com/channel/UCqC_GY2ZiENFz2pwL0cSfAw"><img src="./img/yt2.png" alt="Y"></a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>

</html>

CodePudding user response：

If you give relative to the position property, the header starts scrolling too.

header{
 .
 .
position: relative;
 .
 .
}

Page link：https//www.codepudding.com/Blockchain/417344.html

Prev:Is there any way to add just an icon to a MailChimp embed form 'submit' button?
Next:How can I get my layout boxes to wrap responsively?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding