jquery - 移动导航菜单 - 响应格式

Question

我目前一直致力于让导航菜单适合移动设备。我想要的效果是让 Logo 位于屏幕左侧，菜单按钮位于右侧。每当您单击菜单按钮时，它都会切换 Logo 下方的菜单和菜单按钮。但是，菜单要么出现在 Logo 和菜单的右侧，要么菜单和 Logo 粘在一起，或者其他问题。

我尝试过的解决方案:

• float :在#menu 上。问题是将菜单按钮向上或向下推一行，它不再与 Logo 垂直对齐。
• .logo 上的 margin-right 百分比。这个问题是它只使菜单按钮在 20px 范围内右对齐。使其变得无用并需要过多的媒体查询

那么怎样才能达到想要的效果呢？

<header class="parent_header">
    <div class="main_header">
        <h2 class="logo"><a href="#">Kar Kompare</a></h2>
        <ul class="main_nav">
            <li><a href="#">Buy</a></li>
            <li><a href="#">How It Works</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>

在这里查看我的 html:https://jsfiddle.net/cfavela512/74x5975j/

谢谢你的帮助

Answer 1

试试下面的 CSS

    #menu {
        float: right;
        margin: 24px 0;
    }
   .logo {
       background:red;
       float: left;
       margin: 0;
       padding: 20px 0;
   }
  .main_nav {
      clear: both;
   }