Question

这是我的website.我使用Wordpress，我的主题是Sonata（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＆amp; 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是父主题，在你的情况下是Sonata。然后，在后端选择您的主题作为您网站的主题。

最后但并非最不重要：imho，你不应该修改span div的css。很可能这是像网格一样的（网格）框架的一部分，它可能有12列的布局，其中span-4表示宽度为100％的4/12。这是默认结构，并不意味着要改变。但继续尝试。

Answer 2

我添加了style =“position：absolute; height：100％;”到一个img标签，它得到修复。

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

2 个答案: