CSS not loading when deploying site

Support
,
1

Hi there,

I’m having a weird issue and have no clue how to solve it. I have added a horizontal menu at the bottom of my site. This is the HTML:

<ul id="menu-horizontal" class="site-footer powered-by">
  <li><a href="notes/">Notes</a></li>
  <li><a href="ebau-resources/">EBAU Resources</a></li>
  <li><a href="tutorials/">Tutorials</a></li>
  <li><a href="online-resources/">Online Resources</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="about-me/">About me</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

and this is the CSS (based on this:

ul#menu-horizontal {
  text-align: justify;
}

ul#menu-horizontal:after {
  content: '';
  display: inline-block;
  width: 100%;
}

ul#menu-horizontal:before {
  content: '';
  display: block;
}

ul#menu-horizontal li {
  display: inline-block;
  position: relative;
}

Now, this works in local:

image
image2160×811 159 KB

but not when deployed in Netlify (live version here, scroll to the bottom):

image
image2160×811 158 KB

using exactly the same Hugo version (0.78.2) and browser (Safari 14.0.1 under macOS 11.0.1).

Any clue what’s happening?

Thanks in advance!

2

We need to check live URL (and source if possible). Just the above code is not much of use.

3

Live URL is here, scroll to the bottom (I put this in the original message). Source is here. HTML here and CSS here.

4

I removed all your current styles for the <ul> and added these instead:

ul#menu-horizontal
  {
    padding: 0;
    display: flex;
    width: 100%;
    justify-content: space-evenly;
  }

ul#menu-horizontal li
  {
    list-style: none;
    margin: auto;
    width: max-content;
  }

@media screen and (max-width: 640px)
  {
    ul#menu-horizontal
      {
        display: block;
        width: max-content;
      }
  }

This makes the list vertical on smaller screens (screens lesser than 640px in width), and keeps it horizontal on the larger ones. You can change that number if you wish.

I got this:

image
image1920×1080 331 KB

image
image1920×1080 245 KB

Note: I haven’t checked your source. I have just done this using Developer Tools. So, you might need some additional debugging when changing your source code.

5

You’re awesome @hrishikesh. I changed my style according to your suggestion and everything is fine now:

desktop
desktop2880×1800 459 KB

For smaller screens I used 768px as it’s the value used across the site. I only had to add margin-left: auto and margin-right: auto as otherwise the list was not centered.

@media screen and (max-width: 768px) {
  ul#menu-horizontal {
    margin-left: auto;
    margin-right: auto;	
    display: block;
    width: max-content;
  }
}

phone
phone750×1334 137 KB

Any idea why my original code worked in local but not when deployed? Maybe it has to do with minifying the CSS? You can check here my netlify.toml file.

Thanks again!

6

I tried downloading your code to test that now. However, I’m getting an error: Module "github.com/wowchemy/wowchemy-hugo-modules/wowchemy" is not compatible with this Hugo version; run "hugo mod graph" for more information.. What Hugo version are you using?

7

The latest version of Wowchemy requires Hugo 0.78 so I’m using 0.78.2.

8

That’s strange. I’m using 0.78.1. Should have worked. I’ll try with .2.

9

Okay, so, I got it working with the latest version, and as I can see, it indeed looks fine locally. However, I can see, as soon as I disable the ul:after, the menu collapses and turns to the one you showed in the first post. So, that’s probably the cause.

But as I see, :before and :after were really not needed for the <ul>. They might have been a part of some ‘hacky CSS alignment’. When you want to align contents horizontally, flex works well in most cases.

1 Like