桌面上的网站标题小部件搞砸了移动标题

Question

我最近在桌面模式的网站标题中添加了一个小部件。我努力让这个小部件在同一条线上并且在徽标的右边，但我最终得到了它。在这个过程中，我似乎搞砸了标题在移动设备上的外观（例如，请参阅twoguysplayingzelda.com）。由于65％的收视率是通过移动设备，我想解决这个问题，但还没弄清楚如何。我希望徽标居中，完全可以看到，左侧的菜单图标（在我做出更改之前使用它）。我知道我需要在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

菜单图标被徽标向右推，因为它们都有float: left。

尝试从float: left删除.logo，然后将display: inline-block添加到.blog-logo。这应该可以解决你的两个问题。