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



我最近在桌面模式的网站标题中添加了一个小部件。我努力让这个小部件在同一行上并在徽标的右侧,但我最终得到了它。在此过程中,我似乎搞砸了标题在移动设备上的外观(有关示例,请参阅 twoguysplayingzelda.com(。由于我 65% 的收视率是通过移动设备进行的,因此我想解决此问题,但不知道如何解决。我希望徽标居中,完全可见,菜单图标位于左侧(以前是在我进行更改之前(。我知道我需要将编码添加到我的样式.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;
}

菜单图标被徽标推到右侧,因为它们都有float: left

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

相关内容

  • 没有找到相关文章

最新更新