CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
Luuc
Luuc

Reputation: 109

Header menu full width with background color

I am trying to make my header menu stretch across my complete wordpress website width and have a blue background.
I've managed to find the right css selector .main-navigation

However, i've tried using padding, margin and width css elements but none seem to do the trick.
You can have a peek at the site to get a better understanding of what I mean.

You can find the css i'm currently using below: 

.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;
}

I'd love to hear your ideas on this problem.

Thanks

Upvotes: 0

Views: 1378

Answers (2)

Zac
Zac

Reputation: 128

If you must do it with CSS, then this is one way. You need to make the site header container full width and remove the padding. The site navigation will now be full width and you can set the background color to blue.

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

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

However, if you have access to the templates and feel comfortable changing them, change the HTML mark up, and bring the navigation outside the container. Or simply change container div class to container-fluid (if using Bootstrap 3).

Upvotes: 2

David Skx
David Skx

Reputation: 131

Does this solve your problem?

.main-navigation {
  display: flex;
  justify-content: space-around;
  background-color: blue;
}

Upvotes: 1

Related Questions