如何在 Wordpress 中使用 CSS 修复 header 高度和调整徽标大小

Question

这是我的 website. 我使用 Wordpress，我的主题是奏鸣曲 (Themeforest)。

在某些时候，我对 CSS 代码中的菜单栏高度进行了一些调整，但现在我想再次将其缩小（更符合比例）。另外，我想让徽标具有响应性，以便它适合菜单栏。

有人可以帮我 CSS 代码吗？我不知道我应该修改代码的哪一部分，但我相信是这个（如果不是，请纠正我）：

/* Header
-------------------------------------------------------------------------------------- */
#wi-header {
    width:100%;
    height:40px;
    position:relative;
    background:#fff;
    z-index:9999;
    transition:height .3s ease-out;
    }
#wi-header .container {
    position:relative;
    }   
#wi-logo a {
    display:block;
    color:#333;
    font-size:34px;
    font-family:"Oswald", sans-serif;
    text-decoration:none;
    text-transform:uppercase;
    margin:0;
    height:auto;
    }
#wi-logo img {
    max-height:auto;
    display:block;
    class:img-responsive;
    }   
.site-description {
    color:#999;
    font-style:italic;
    margin-top:10px;
    }
.site-description a {
    color:#333;
    text-decoration:underline;
    }

提前感谢您的帮助！

Answer 1

如果你想调整布局，我建议你开始学习 HTML 和 CSS。也就是说，您的徽标采用其父元素的宽度，即 <div class="span4">。因此，与此 div 相比，您的徽标的宽度为 100%。一种解决方案可能是：

#wi-logo img {
  width: 50%;
}

这将使您的徽标成为其父徽标宽度的一半。但是有多种可能性，这取决于你真正想要什么。再次，我建议你学习基础知识。 MDN 是一个很好的起点。

编辑：

在大多数情况下，如果您不想修改主题，您可以做的最好的事情就是创建一个子主题。修改现有主题的代码绝不是好的做法。当它更新时，您可能会丢失更改。看看https://codex.wordpress.org/Child_Themes。简短的回答：创建一个至少包含 style.css 文件的子主题，并在那里进行更改。 style.css 的顶部至少应包含以下注释：

/*
 Theme Name:   Your Child Theme Name
 Template:     Sonata
*/

其中 Template 是父主题，在您的例子中是奏鸣曲。然后，在后台选择你的主题作为你网站的主题。

最后但同样重要的是：恕我直言，您不应该为范围 div 修改 css。这很可能是 Foundation 等（网格）框架的一部分，它可能有 12 列的布局，其中 span-4 表示 100% 宽度的 4/12。这是默认结构，不打算更改。但是继续实验。

Answer 2

我在 img 标签中添加了 style="position:absolute; height:100%;"，它得到了修复。

如何在 Wordpress 中使用 CSS 修复 header 高度和调整徽标大小

How to fix header height and resize logo with CSS in Wordpress

css

wordpress

menubar