Help - Header Background not Showing

support
1

Hi there,

I am using a header partial with the following code:

<header class="container-fluid sitewide-header">
  <div class="container">
      <div class="col-md-auto float-left">
        <a href="{{ .Site.BaseURL }}">
        <img class="img-fluid sitewide-header-logo" src="/images/sitewide/cube-play-more.png">
        </a>
      </div>
      <div>
       {{ partial "sitewide-header/header-social-links" . }}
      </div>
  </div>
</header>

I would like to style the header with a subtle background texture. However, I cannot apply any background styles to the header either inline or via my CSS file. I know that the problem is not my image file path, because I have tried simply setting the style for .sitewide-header to

.sitewide-header {
    background-color: red;
}

but also to no avail. When I apply these styles and preview on my server, I can see in the element inspector that these styles are applied. However, they just don’t show. I am confident that if I can get the red background to show up, I can get the image to show up that I want to insert instead.

If I put some random text at the top of my header, right below <header class="container-fluid sitewide-header">, I get the portion of text with a red background, but the rest of the header background is as white as ever.

Any advice would be greatly appreciated.

:see_no_evil:

2

From the first look I cannot see anything wrong, so I guess the url to your stylesheet is maybe wrong. Did you check the html code which hugo generates? Depending on your settings it might work on your PC but not when deployed.
Also, it would be greatly appreciated if you can share your source on github so others can take a look.