Main webpage content visible at the top of header bar

Get Help HTML
#1

Hi all,

First time posting!

I am on the Challenge Project: Build Your Own Cheat Sheet part of the HTML/CSS course. I am creating a website for this at http://robertjleach.co.uk/htmlcss/index.html. As you can see from that site the header bar is fixed to the top using

position: fixed;

This works in that the header is fixed but as you scroll through the body content you can see some of it scroll at the top of the navigation bar - almost as if the navigation bar doesn’t go all the way to the top.

Here is the relevant code in index.html;

<header class="mainheading">
            <h1>Robert's CSS Cheatsheet</h1>
            <nav>
                <ul>
                    <li><button><a href="#home">Home</a></button></li>
                    <li><button><a href="#basichtmltags">Basic HTML tags</button></a></li>
                    <li><button><a href="#htmltables">HTML Tables</button></a></li>
                    <li><button><a href="#introductiontocss">Introduction to CSS</button></a></li>
                    <li><button><a href="#advancedcss">Advanced CSS techniques</button></a></li>
                </ul>
            </nav>
        </header>

And in styles.css:

.mainheading {
	background-image: url("banner.jpeg");
    position: fixed;
    width: 100%;
    height: 150px;
    margin-top: 0px;
 }

.mainheading h1 {
    font-family: "Geneva",sans-serif; 
    color: black;
    background-color: white;
    max-width: 25%;
    }

#home, #basichtmltags, #htmltables, #introductiontocss, #advancedcss p {
    font-family: "Geneva",sans-serif; 
    color: black;
    font-size: 20px;
}

nav li, a, button {
    display: inline-block;
    font-family: "Geneva", sans-serif;
    color: black;
    font-weight: bold;
    padding: 10px;
    text-decoration: none;
    }

nav a:hover {
    color: blueviolet;
}

Any help gratefully appreciated :slight_smile:

#2

If your want to move the .mainheading farther up,
you could do
margin-top: -20px;

#3

Thanks so much, that worked :slight_smile: