How to make image logo stay fixed within fixed navbar

1

Hi! Basically the logo on my navbar is actually an image so when I scroll down the screen even though my navbar stays fixed at the top my logo image will disappear/not stay at top of screen within the navbar?

In other words how do I allow for my image logo to stay fixed within the navbar? I tried position: sticky; in css but it did not work. Sorry I’m a beginner in coding so I’m a bit clueless.

2

Hi, phyllinator how about you display your html code where your nav bar is and the css in styling it. let me see.

3 
        <header>
        
            <nav class="topnav">
            
                <a href="contact.html">CONTACT</a>
                <a href="Clubs.html">CLUBS</a>
                <a class="active" href="index.html">HOME</a>
            
            </nav>
            
            <a href="index.html">
                <img src="Images/logo.PNG" alt="logo" class="logo">
            </a>

        </header>


.topnav {
    background-color: #FFDD00;
    overflow: hidden;
    position: fixed; 
    top: 0;
    width: 100%; 
    height: 70px;
    
}

.topnav a {
    float: right;
    color: #002036;
    text-align: center;
    padding: 25px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;    
    display: block;

}

.topnav a.active {
    background-color: #002036;
    color: #FFDD00;
}

.main {
    margin-top: 30px; 
}

.logo {
    width: 600px;
    top: -2px;
    position: absolute;
}

there you go :slight_smile:

4

Hi Phyllinator,

The image is not inside nav element so the topnav class will not be applied to it.

Put the image within the nav tags , then the position: fixed; will apply to the image as well.

Let me know if you have any questions.

Best,

Hasan

2 Likes
5 
How about reformatting your code this way.

   <header id="top-header">

             <a href="index.html">
                   <img src="Images/logo.PNG" alt="logo" class="logo">
             </a>

            <nav class="top-nav">

                <a href="contact.html">CONTACT</a>
                <a href="Clubs.html">CLUBS</a>
                <a class="active" href="index.html">HOME</a>
            
            </nav>

        </header>
1 Like
6 
Here is the css code.

#top-header{
        display: flex;
        position: fixed;
        flex-direction: row;
        top: 0;
        left: 0;
        width: 100%;
        padding: 5px;
        margin: 0 auto;
        justify-content: space-between;
        z-index: 999;
        background: #eee;
}

.top-nav {
    background-color: #FFDD00;
    overflow: hidden;
    position: fixed; 
    top: 0;
    width: 100%; 
    height: 70px;
    
}

.topnav a {
    float: right;
    color: #002036;
    text-align: center;
    padding: 25px 16px;
    text-decoration: none;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;    
    display: block;

}

.topnav a.active {
    background-color: #002036;
    color: #FFDD00;
}

.main {
    margin-top: 30px; 
}

.logo {
    display: block;
    width: 20vw; // if it's too big or small you can re-adjust to your prefered size.
    height: 10vh;
}
2 Likes
7

Thank you so much guys! With your help and some little tweaking I finally got my navbar to work the way I want to!