css - 桌面上的网站标题小部件弄乱了移动标题

Question

我最近在桌面模式的网站标题中添加了一个小部件。我努力让这个小部件位于同一行并位于 Logo 的右侧，但我最终做到了。在此过程中，我似乎弄乱了 header 在移动设备上的外观(有关示例，请参阅 twoguysplayingzelda.com)。由于我 65% 的收视率是通过手机观看的，所以我想解决这个问题，但还不知道如何解决。我希望 Logo 居中，完全可见，并且菜单图标位于左侧(在我进行更改之前它曾经是)。我知道我需要将编码添加到我的 style.css 的响应部分。下面是我目前在 CSS(桌面部分)中的标题。在开始我的网站之前，我对 CSS 和 HTML 一无所知，所以我仍然有点菜鸟。感谢您的帮助

div#header-widget-area {
  float: right;
}

.header { 
  padding-top: 10px;
  padding-bottom: 60px;
  color: #01B3D9;
}

.header .cover { 
  background: rgba(29,29,29,0.0); 
}

.header-inner {
  position: relative; 
}

.header .blog-logo { 
  text-align: left; 
}

.header .logo { 
  display: inline; 
  float: left;
}

.header .logo img {
  max-height: 50px;
  width:auto;
}

Answer 1

菜单图标被 Logo 推到右侧，因为它们都有 float: left。

尝试将.logo中的float: left去掉，将display: inline-block添加到.blog-logo。这应该可以解决您的两个问题。