Problem
" float: right"
poorly working in responsive class
Basically, I am trying to place my image logo in the right-up corner for a semi-lang case but every manipulation on .logo
force navigation bar to change its values.
Question
How can I align the logo to the right-up corner?
What I’ve tried
let mainNav = document.getElementById('js-menu'); let navBarToggle = document.getElementById('js-navbar-toggle'); navBarToggle.addEventListener('click', function () { mainNav.classList.toggle('active'); });
* { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: 'Josefin Sans', sans-serif; } .navbar { background-image: url("bg-mob.png"); background-size: 100vw; font-size: 18px; /*background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);*/ border: 1px solid rgba(0, 0, 0, 0.2); padding-bottom: 10px; } .main-nav { list-style-type: none; display: none; } .nav-links, .logo { text-decoration: none; color: rgba(255, 255, 255, 0.7); } .main-nav li { text-align: center; margin: 15px auto; } .logo { display: inline-block; font-size: 22px; margin-top: 10px; margin-left: 20px; /*margin-right: auto;*/ } .logo img { width: 150px; /*background-color: white;*/ } .navbar-toggle { position: absolute; top: 15px; left: 20px; cursor: pointer; color: rgba(255,255,255,0.8); font-size: 24px; } .active { display: block; }
<nav class="navbar"> <span class="navbar-toggle" id="js-navbar-toggle"> <img src="https://via.placeholder.com/50" alt=""> </span> <a href="#" class="logo"><img src="https://via.placeholder.com/150/0000FF"></a> <ul class="main-nav" id="js-menu"> <li> <a href="#" class="nav-links">Home</a> </li> <li> <a href="#" class="nav-links">Products</a> </li> <li> <a href="#" class="nav-links">About Us</a> </li> <li> <a href="#" class="nav-links">Contact Us</a> </li> <li> <a href="#" class="nav-links">Blog</a> </li> </ul> </nav>
Advertisement
Answer
Positions absolute and floats do not play well together and are a headache on their own when you try to align them with other elements.
Thankfully you do not have to mess with them, since display:flex
is a thing
What I would do is add a wrapper div around your toggler and logo and make that flex and justify the two items on the edges, like so:
<nav class="navbar"> <div style="display:flex; justify-content: space-between;"> <span class="navbar-toggle" id="js-navbar-toggle"> <img src="menuicon.png.png" alt=""> </span> <a href="#" class="logo"><img src="logo-blue.png"></a> </div> <ul class="main-nav" id="js-menu"> [...]
And this way you can remove the absolute position from your toggler