Connecting static pages via navbar

support
1

Hello!

I created a navbar and I am having an issue linking pages to it.

<nav class="topnav flex-center hide-sm">
  <div class="topnav-menu flex-center nav-right hide-sm">
    <a href="/" class="item item-text" aria-label="Home">Home</a>
    <a href="" class="item item-text" aria-label="Services">Services</a>
    <!-- <a href="" class="item item-text" aria-label="Portfolio">Portfolio</a> -->
    <a href="/research" class="item item-text" aria-label="Research">Research</a>
    <!-- <a href="" class="item item-text" aria-label="Careers">Careers</a> -->
    <a href="/contactus" class="item item-button">{{ partial "svg/contact-us-header.svg"}}</a>
  </div>
</nav>

I have the following code and have created folders under layout for research and contactus with single and list files in each. My issue is that when loading contactus I get a 404 however it successfully loads the research view.

Thanks

2

Then the page is not where you think it is. From the data you provided, it’s not possible to see what might go wrong, though. Perhaps a look into your browser’s developer console might give you a hint where the browser is looking for the relevant page.

3

My console also just says 404. Is there another way I Could just link to the page. At this point I don’t know how to approach troubleshooting it because its just throwing a 404

4

If you are using the code above then I’m not seeing how you are referencing your pages. Here is an example of how I have utilised a navbar:

<nav>
	<ul>
		{{range where .Site.Pages ".Type" "page" -}}
		<li><div><a href="{{ .Permalink }}"><h2>{{.Title}}</h2></a></div>
		</li>
		{{- end}}
	</ul>
</nav>

The basic point being that you need to tell Hugo what pages you want in the menu. Beyond that the first bit of troubleshooting I would suggest is to paste in the link that Hugo is generating for your menu (view source should tell you that). Sorry if this is teaching you to suck eggs, but there really isn’t much to go on otherwise. Best of luck.

5

With an href attribute in the a element, it seems.

6

Hardcoding URLs in your nav HTML is probably not the best choice. Instead, take advantage of Hugo’s menu system. Benefits:

  • Then menu is based on data (TOML, YAML, or JSON)
  • If you use the pageRef property (see site configuration example below) Hugo will figure out the URL for you, taking into account permalink settings, whether or not the site is being served from a subdirectory, the uglyURLs configuration setting, slug or url set in a page’s front matter, etc.
  • You can programmatically apply an active class to a menu item based on current page and section.
site configuration 
[[menu.main]]
name = 'Home'
pageRef = '/'
weight = 10

[[menu.main]]
name = 'Services'
pageRef = '/services'
weight = 20

[[menu.main]]
name = 'Research'
pageRef = '/research'
weight = 30

[[menu.main]]
name = 'Contact us'
pageRef = '/contact'
weight = 40

template

{{ $currentPage := . }}
{{ with site.Menus.main }}
  <nav class="topnav flex-center hide-sm">
    <div class="topnav-menu flex-center nav-right hide-sm">
      {{ range . }}
        {{ if $currentPage.IsMenuCurrent "main" . }}
          <a class="active item item-text" aria-current="page" href="{{ .URL }}">{{ .Name }}</a>
        {{ else if $currentPage.HasMenuCurrent "main" . }}
          <a class="active item item-text" aria-current="true" href="{{ .URL }}">{{ .Name }}</a>
        {{ else }}
          <a class="item item-text" href="{{ .URL }}">{{ .Name }}</a>
        {{ end }}
      {{ end }}
    </div>
  </nav>
{{ end }}

Without seeing the exact structure of your content directory, the pageRef values in the site configuration above are just a guess. Those values are paths to the content pages, not URLs.

Once you have this working, you can go back and add a special case for the Contact entry to add an SVG.