I am currently working on setting up a navigation bar with a PNG link in the top left corner, and a text element "menu" in the top right corner. Despite my efforts, I have not been successful in achieving this layout using "float: right;"
The code snippet provided reveals that I utilized float: right; for the .topnav elements. It is possible that the presence of .logo is causing interference in achieving the desired layout. To align the PNG logo with the text element, I had to separate them into different divs.
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
float: right;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 17px;
}
.topnav_right {
float: right;
}
.logo {
float: left;
}<div class="container">
<div class="logo">
<a href="index.html"><img src="####.png" style="max-width:100%;"></a>
</div>
<div class="topnav">
<div class="topnav_right">
<a href="index.html">Menu</a>
</div>
</div>
</div>Despite my efforts, the text remains next to the logo instead of being positioned in the opposite top right corner as intended.