需要防止站点名称在较小的设备上突破到下一行

Question

我正在concrete.lifestylerevolutionstx.com建立一个响应式网站，由于某种原因，网站名称会以较小的屏幕尺寸突破到徽标下方的下一行。任何想法如何强迫他们保持同一条线？

Answer 1

正如@millimouse在评论中建议的那样，由于您的徽标标题是部分文字和部分图片，因此您应该将white-space: no-wrap;添加到容器中，在这种情况下它是.top-bar .name h1 a。这将抑制文本中的换行符。

此外，您应该考虑删除overflow: hidden;元素中nav与.top-bar类，并在z-index元素中添加至少为3的section使用班级.top-bar-section，您的汉堡包按钮菜单实际显示在滚动图库上，以显示较低的屏幕宽度（宽度<= 979px）。