CODEWITHSUNDEEP
javascripthtmlcss
Hernan Calcurian Rojas
Hernan Calcurian Rojas

Reputation: 3

How to have an image under a fixed navigation bar?

im trying to put an image under my navigation bar. The problem is that when i do background: url(...) no-repeat center center also size: cover the image shows under my fixed navigation bar and cuts my face off, so was wondering how to start the image below the navigation bar. 

<header>
    <nav>
        <div class="logo">
            <img src="img/HC logo.svg">
        </div>
        <ul>
            <li><a href="#" class="link">Home</a></li>
            <li><a href="#" class="link">About</a></li>
            <li><a href="#" class="link">Portfolio</a></li>
            <li><a href="#" class="link">Contact</a></li>
        </ul>
        <div class="menu-toggle">
            <i class="fas fa-bars" aria-hidden="true"></i>
        </div>
    </nav>
    <div class="hero">
        <div></div>
        <div class="content">
            <h1>Hi, I'm .... & I'm a Front-end Developer</h1>
            <p>
                just testing my code
            </p>
            <a class="button" herf="#">Learn More</a>
        </div>
    </div>
</header>

Thank you. If you need anything else please let me know.

Upvotes: 0

Views: 687

Answers (2)

Jake
Jake

Reputation: 742

Change your background position from center center to top 20px or however much clearance you need. Check Here

Upvotes: 0

Adam James
Adam James

Reputation: 172

It sounds like you want the navigation bar to be relatively positioned until you begin scrolling then you want it to be fixed position. That way your hero div will respect the height of your navigation bar. To do this people commonly use "sticky headers"

https://www.w3schools.com/howto/howto_js_sticky_header.asp

Upvotes: 1

Related Questions