Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Header menu full width with background color – Woocommerce

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

Tags:

2

Answers


  1. 0

    Does this solve your problem?

    .main-navigation {
  display: flex;
  justify-content: space-around;
  background-color: blue;
}
    Login or Signup to reply.
  2. 0

    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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search