# CSS path does not work after mainpage

**URL:** <https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503>\
**Category:** support\
**Created:** [January 19, 2023, 1:35pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503 "2023-01-19T13:35:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 1:35pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/1 "2023-01-19T13:35:19Z")

</div>

Hello

I’m kinda new to HUGO but working on it since weeks.  
I managed to setup my page but all nice and good until i leave the main page /base url.  
My problem is that CSS path is not “carried over” to the new pages, posts etc.  
It is a file path isue, because if i move my “styles.css” to the directory of each individual generated .html. the format is fine.  
I did deep research and dozens of tutorials, posts, and read a loot but didnt found the solution.

The location of my CSS file: theme/static/css/styles.css  
My actual baseof.html looks like this:

```auto
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
    <link rel="shortcut icon" sizes="64x64" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    <title>{{ block "title" . }}>{{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <header>
      {{ block "header" . }}
      {{- partial "header.html" . -}}
      {{ end }}
    </header>
    <main class="mb-auto mt-5 pt-3">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer class="sticky-footer">
      {{ block "footer" . }}
      {{- partial "footer.html" . -}}
      {{ end }}
    </footer>
  </body>
</html>

```

It must be a banal mistake what i simply can not see anymore, please help & TY.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 19, 2023, 2:38pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/2 "2023-01-19T14:38:38Z")

</div>

> [@Attila\_Az](#):
>
> ` <link rel="stylesheet" href="/css/styles.css">`

There’s a long story here, but you could fix this by changing the above to:

```auto
<link rel="stylesheet" href="{{ `css/styles.css` | relURL }}">

```

A slightly related tip would be to put your CSS into /assets and load it with `resources.Get`. That way you don’t have to worry (that much) about path and get the added benefit of using the `minify` and other related functions on your CSS.

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 2:59pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/3 "2023-01-19T14:59:28Z")

</div>

Ty for your reply. Sadly this option i tryed also and did not worked.

[https://personalpage.mywire.org](https://personalpage.mywire.org)

It is actual with:

```auto
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ `css/styles.css` | relURL }}">
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
    <link rel="shortcut icon" sizes="64x64" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    <title>{{ block "title" . }}>{{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <header>
      {{ block "header" . }}
      {{- partial "header.html" . -}}
      {{ end }}
    </header>
    <main class="mb-auto mt-5 pt-3">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer class="sticky-footer">
      {{ block "footer" . }}
      {{- partial "footer.html" . -}}
      {{ end }}
    </footer>
  </body>
</html>

```

#desperate 🥴

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [January 19, 2023, 3:05pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/4 "2023-01-19T15:05:17Z")

</div>

The code for your other pages (home is OK) is with a strange and bad structure I think

Problem is not the `css` but the way you deal with sections and pages.

See

```auto
<header>
  <p></p>
  <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a, .dropbtn {
  background: #35363a;
  display: inline-block;
  color: #1cdc99;
  text-align: center;
  padding: 11px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #3dade9;
  color: #35363a;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3dade9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(61,173,233,0.7);
  z-index: 1;
}

.dropdown-content a {
  color: #3dade9;
  padding: 11px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #3dade9;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="https://personalpage.mywire.org"><img src="img/favicon.png" width="64" height="64"></a></li>
  <li><a href="/product1/page1">Page</a></li>
  <li><a href="/blog/my-first-post">Post</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="https://www.google.com">Google</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

</body>
</html></header>

<h1>Page1</h1>

<h3 id="page-1">Page 1</h3>
<ul>
<li>
<p>This is a test page with some content:</p>
<ul>
<li>Content:</li>
</ul>
</li>
<li>
<p>Content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content, content da.</p>
</li>
</ul>

<footer class="center-footer-text">
<p>&copy;2023 Mato</p>
<footer>

```

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:09pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/5 "2023-01-19T15:09:12Z")

</div>

Yes, but when you try to open my Page or Post example pages… its a mess 😵‍💫

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [January 19, 2023, 3:10pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/6 "2023-01-19T15:10:44Z")

</div>

See the modified post, I thought you had only a home.

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:11pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/7 "2023-01-19T15:11:26Z")

</div>

Ty, checking right now

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:26pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/8 "2023-01-19T15:26:37Z")

</div>

I simply can not see the diference:

[https://personalpage.mywire.org/product1/page1/](https://personalpage.mywire.org/product1/page1/) is 1:1 of your code here idk im realy that blind 😧

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [January 19, 2023, 3:31pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/9 "2023-01-19T15:31:01Z")

</div>

> [@Attila\_Az](#):
>
> [https://personalpage.mywire.org/product1/page1/](https://personalpage.mywire.org/product1/page1/) is 1:1 of your code here idk im realy that blind 😧

Yes. Your HTML code for sections/pages is badly structured.

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:34pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/10 "2023-01-19T15:34:51Z")

</div>

It is a 1:1 HUGO generated .html, without any modification after, so dik then.  
In case the baseof.html is fine, css is fine, the paths are egzisting and correct. Then it remains a mystery.  
How would a basic but correct structure look like?

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [January 19, 2023, 3:39pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/11 "2023-01-19T15:39:00Z")

</div>

> [@Attila\_Az](#):
>
> It is a 1:1 HUGO generated .html, without any modification

NO. Hugo does NOTHING by itself.

You have some logic for sections and pages in your code.  
There is NO hugo code from scratch. Either you use a theme or made your own code.  
And this is broken. And the flaw is there.

Without seeing your code it will be impossible to help you.

And this is the proof that your hugo code is bad. See the (bad) test result : [https://validator.w3.org/nu/?doc=https%3A%2F%2Fpersonalpage.mywire.org%2Fproduct1%2Fpage1%2F](https://validator.w3.org/nu/?doc=https%3A%2F%2Fpersonalpage.mywire.org%2Fproduct1%2Fpage1%2F)

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [January 19, 2023, 3:47pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/12 "2023-01-19T15:47:54Z")

</div>

> [@Attila\_Az](#):
>
> How would a basic but correct structure look like?

I do not have a crystal ball at the moment … 😀

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:48pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/13 "2023-01-19T15:48:56Z")

</div>

Oooh damn i was 1:1 folowing the instructions and troubleshhoting.  
So the template files are broken then:

config.toml

```auto
baseURL = "https://personalpage.mywire.org/"
languageCode = "en-us"
title = "Mato"
theme = "mato"

```

* * *

baseof.html

```auto
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ `css/styles.css` | relURL }}">
    <link rel="shortcut icon" type="image/png" href="/img/favicon.png">
    <link rel="shortcut icon" sizes="64x64" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">
    <title>{{ block "title" . }}>{{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    <header>
      {{ block "header" . }}
      {{- partial "header.html" . -}}
      {{ end }}
    </header>
    <main class="mb-auto mt-5 pt-3">
      {{ block "main" . }}
      {{ end }}
    </main>
    <footer class="sticky-footer">
      {{ block "footer" . }}
      {{- partial "footer.html" . -}}
      {{ end }}
    </footer>
  </body>
</html>

```

* * *

single.html

```auto
{{ partial "header.html" . }}

<h1>{{ .Title }}</h1>

{{ .Content }}

{{ partial "footer.html" . }}

```

* * *

list.html

```auto
{{ partial "header.html" . }}

<h1>{{ .Title }}</h1>

{{ .Content }}

{{ range.Data.Pages }}
<article class="post-snippet">
  <h3>
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
  </h3>
	<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
		{{ .Date.Format "January 2, 2006" }}
	</time>
</article>
{{ end }}

{{ partial "footer.html" . }}

```

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [January 19, 2023, 3:49pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/14 "2023-01-19T15:49:30Z")

</div>

> [@divinerites](#):
>
> Without seeing your code it will be impossible to help you.

It means ALL your code. Not just pieces

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:51pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/15 "2023-01-19T15:51:25Z")

</div>

I dont know what else to add, rest is kinda generic stuff. There must be something above in those 4

---

<div class="post-metadata">

**Author:** ![andrewd72](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andrewd72/32/18371_2.png) [@andrewd72](https://discourse.gohugo.io/u/andrewd72)\
**Post date:** [January 19, 2023, 3:55pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/16 "2023-01-19T15:55:53Z")

</div>

In your baseof.html you have a main block.  
You need to define that main block in the single.html  
Without worrying about the footer for now, see if this works:

```auto
{{ define "main" }}
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}

```

[Base Templates and Blocks | Hugo (gohugo.io)](https://gohugo.io/templates/base/#:~:text=The%20block%20keyword%20allows%20you,or%20override%20portions%20as%20necessary.)

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 3:56pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/17 "2023-01-19T15:56:20Z")

</div>

Ty, i try instantly

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 4:00pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/18 "2023-01-19T16:00:44Z")

</div>

My single.html looks like this and its way better than before.

```auto
{{ define "main" }}
{{ partial "header.html" . }}
<h1>{{ .Title }}</h1>
{{ .Content }}
{{ end }}

```

```auto
https://personalpage.mywire.org/blog/my-first-post/

```

---

<div class="post-metadata">

**Author:** ![Attila\_Az](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/attila_az/32/18636_2.png) [@Attila\_Az](https://discourse.gohugo.io/u/Attila_Az)\
**Post date:** [January 19, 2023, 4:06pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/19 "2023-01-19T16:06:35Z")

</div>

baseof html fixed so i removed the duplicate header  
now fixing the image path to

---

<div class="post-metadata">

**Author:** ![andrewd72](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/andrewd72/32/18371_2.png) [@andrewd72](https://discourse.gohugo.io/u/andrewd72)\
**Post date:** [January 19, 2023, 4:07pm UTC](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503/20 "2023-01-19T16:07:05Z")

</div>

Your favicon wants to be /img/favicon.png not img/favicon.png

Define the footer block now or call it in a more simple way without using blocks.

[Next page](https://discourse.gohugo.io/t/css-path-does-not-work-after-mainpage/42503.md?page=2)
