How can I get a fixed drop down icon on a responsive topnav?

Issue

Basically, I have a self-coded portfolio page. I just did a rework on the top navigation so it is more mobile-friendly. Once the user shrinks the window, the options will disappear and be replaced by a drop-down button so they can be viewed vertically on small screens.

However, I have a bit of a problem with the positioning of this icon.

My HTML code:

<div class="topnav" id="myTopnav">
        <div class="topnav-left">
        <a href="/"><img src="Img/Signature-Black.png"></a>
        </div>
        <a href="./contact.html">Contact</a>
        <a href="./about.html"> About</a>
        <div class="dropdown">
            <button class="dropbtn">Blog <i class="fa fa-caret-down"></i></button>
            <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            </div>
        </div>
        <a href="./photos.html">Photos</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
            x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>

My external CSS:

.topnav {
    overflow: hidden;
    background-color: blue;
    z-index: 100;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 10%;
}
  
.topnav a {
    float: right;
    color: black;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    margin-right: 35px;
    
}

  
.topnav a:hover {
    color: #ffffff;
    transition: 1s;
    
}
  
.topnav .icon {
    display: none;
}

.topnav .icon:hover {
    color: #daa520;
}


.topnav-left {
    float: left;
}



/* Dropdown */
.dropdown {
    float: right;
    overflow: hidden;
}
  
.dropdown .dropbtn {
    font-size: 18px;
    font-weight: 500; 
    border: none;
    outline: none;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    background-color: inherit;
    font-family: inherit;
    margin-right: 35px;
}
  
.topnav a:hover, .dropdown:hover .dropbtn {
    color: rgb(255, 255, 255);
    transition: 1s;
}
  
.dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
  
.dropdown-content a:hover {
    color: #ffffff;
}
  
.dropdown:hover .dropdown-content {
    display: block;
}



/* Resize Screen */
@media screen and (max-width: 900px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
    
    .topnav-left {
        float: left;
    }

}
  
@media screen and (max-width: 900px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: fixed;
      right: 7%;
      top: 30px;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }

    .topnav.responsive .topnav-left {
        float: none;
    }
    
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
}

Navigation when it is closed

Navigation when it is open

As you can see, the bar icon on the right moves; however, if the window were to shrink far enough, it would just barely move. I'd like to make this fixed in position.

Any possible suggestions or even a solution for this?

I appreciate all answers.

I tried playing around with the positioning, but it will mess up the order between the image and the navigation bar. I am not sure if it is because I used a separate "Div" to get the image to float left.

Solution

Just apply the same CSS for your menu icon when it's closed or opened, simply:

 .topnav .icon {
    position: fixed;
    right: 7%;
    top: 30px;
  }

See the result here: https://jsfiddle.net/pe01vj5u/1/

Answered By - Vincent Decaux