基本响应式导航上的徽标浮动

Question

I am trying to place my image logo in the right-up corner (semi lang problem) but when I add " float: right" to my .logo class in CSS it's mixing my JavaScript function and makes the navigation bar look very bad. I didn't upload my images yet but any other hamburger-menu-icon and logo will fit.

 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>

Answer 1

You can use text-align: right; in .navbar :

 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-image: url("https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj"); 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; text-align: right; /* added */ }.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://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w24-h16-n-l50-sg-rj" alt=""> </span> <a href="#" class="logo"><img src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w150-h100-n-l50-sg-rj"></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>

Answer 2

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