时间戳

首页 > 解决方案 > 带有背景颜色的标题菜单全宽

html - 带有背景颜色的标题菜单全宽

问题描述

我试图让我的标题菜单跨越我的整个 wordpress 网站宽度并具有蓝色背景。
我设法找到了正确的 CSS 选择器.main-navigation

但是，我尝试过使用padding,margin和widthcss 元素，但似乎没有一个可以解决问题。
您可以查看该站点以更好地理解我的意思。

您可以在下面找到我当前使用的 css： 

.product_meta .posted_in {
    display: none;
}
.product_meta {
    padding-top: 10px;
}
.product_meta .sku_wrapper {
        display: block;
        padding-top: 5px;
}
.woocommerce-breadcrumb {
        visibility:hidden;
}
/* Products IN STOCK */
.woocommerce div.product p.stock {
    color: green;
}
/* Products OUT OF STOCK */
.woocommerce div.product p.stock.out-of-stock {
    color: red;
}
/* Products under threshold */
.woocommerce div.product p.stock.low-in-stock {
    color: #FF8C00;
}
.woocommerce-info {
    display: none;
}

我很想听听你对这个问题的想法。

谢谢

标签： htmlcsswordpresswoocommerce

解决方案

如果你必须用 CSS 来做，那么这是一种方法。您需要使站点标题容器全宽并删除填充。站点导航现在将是全宽的，您可以将背景颜色设置为蓝色。

.site-header > .container {
    width: auto;
    padding: 0;
}

nav#site-navigation {
    background: #4d90fe;
}

但是，如果您可以访问模板并且愿意更改它们，请更改 HTML 标记，并将导航带到容器之外。或者简单地将containerdiv 类更改为container-fluid（如果使用 Bootstrap 3）。

推荐阅读