Question

嗨，我很难在Wordpress中自定义这个额外的CSS。我使用一个名为Poza Child的主题，它的最大宽度（100％）如下图所示。我想创建一个响应式导航栏来填充屏幕。

正如你在这里看到的，有一个缺口（黑色和灰色）。我想制作一个响应式导航栏（全黑），就像下面的那样。

然而，由于使用了主题，我必须添加额外的CSS以使其全宽并响应任何屏幕大小。这是wordpress附加CSS的代码片段。

#primary #content {
    margin-top: 50px;
}
#header .nav-main {
    background-color: #000000;
}

#header .nav-main .container {
    width: 100%;
}

.heading {
 border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
padding-top: 4px;
padding-bottom: 4px;
}

我尝试将其更改为负值，以像素为单位（例如-380px），但它对平板电脑和移动设备无响应。我怎么能克服这个？提前谢谢。

Answer 1

谢谢大家。我找到了解决方案。正如你们所说，这是容器问题。

应该是这样的：

<div class="b-row">
                <div class="b-column twelve">
                    <fieldset class="flight-type" role="radiogroup" aria-required="true">
                        <legend class="acc-hide">Choose flight type</legend>
                        <label class="booker-label radio-label">
                            <input data-f-focus="radio" id="ticketTypeReturn" type="radio" name="ticketType" class="required" value="RETURN" checked="checked" />

                            <span class="ci" aria-hidden="true"></span>
                            <span class="ci-label">Round-trip flight</span>
                        </label>
                        <label class="booker-label radio-label g-no-margin">

                            <input data-f-focus="radio" type="radio" name="ticketType" class="required" value="SINGLE" />
                            <span class="ci cis" aria-hidden="true"></span>
                            <span class="ci-label">One-way flight</span>
                        </label>
                        <p id="ticketTypeReturn--required" class="b-v-error" role="alert">Choose flight type</p>
                    </fieldset>

                </div>
            </div>

我刚刚删除了nav-main。谢谢大家！

响应式Wordpress导航栏 - 附加CSS

1 个答案: