HUGO

Deploying my website with Netlify breaks navigation hamburger in mobile view

I’m fairly new to using Netlify for deployments and well deployments in general.

I’m building my portfolio using Hugo and everything is working just fine locally. I’ve added the bootstrap library and a few NPM packages which I’ve removed from my commit’s to Git. Everything has been properly initialized, however when I build locally and view on localhost:1313/ my hamburger expands and collapses just fine. Looking at my site live, not so much. Clicking on the hamburger icon produces no console error, it really does nothing and I’m inclined to believe that its a problem between my deployment and live sight - either something is being omitted in the deployment or I’m missing something.

If code helps here’s what my navigation bar looks like:

{{ $isHome := .Page.IsHome }}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-         controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">      
    {{ if not $isHome }}
    <li class="nav-item">
    <a class="nav-link" href="{{ "" | relLangURL }}">{{ i18n "nav_main" . }}</a>
    </li>
    {{ end }}
    {{ with .Site.GetPage "/home" }}
    {{ $pages := .Resources.ByType "page" }}
    {{ with .Site.GetPage "/blog" }}
        {{ $pages = $pages | append . }}
    {{ end }}
    {{ with .Site.GetPage "/projects" }}
        {{ $pages = $pages | append . }}
    {{ end }}
    {{ range sort $pages "Params.weight" }}
    {{ if ne .Name "contact.md" }}
    {{ if eq (os.Stat .File.Dir).Name "projects" }}
    <li class="nav-item">
    {{ if $isHome }}
      <a class="nav-link" href="{{ printf "#%s" ( .Title | urlize) | relLangURL }}">>{{ .Title | markdownify }}</a>
      {{ else }}
      {{ $pageIsInProjects := eq $.Page.Section "projects"}}
      {{ if not (and $pageIsInProjects (eq $.Page.Kind "section")) }}
      <a class="nav-link" href="{{ .Permalink }}">
        {{ if $pageIsInProjects }}
        {{ i18n "nav_backToSection" . }}
        {{ else }}
        <!-- fix-224 -->
        {{ .Title }}
        <!-- end fix-224 -->
        {{ end }}
      </a>
      {{ end }}
      {{ end }}
    </li>
    {{ else if eq (os.Stat .File.Dir).Name "blog" }}
    <li class="nav-item">
      {{if $isHome }}
        <a class="nav-link" href="{{ printf "#%s" ( .Title | urlize) | relLangURL }}">{{ .Title | markdownify }}</a>
      {{ else }}
      {{ $pageIsInBlog := eq $.Page.Section "blog"}}
      {{ if not (and $pageIsInBlog (eq $.Page.Kind "section")) }}
      <a class="nav-link" href="{{ .Permalink }}">
        {{ if $pageIsInBlog }}
        {{ i18n "nav_backToSection" . }}
        {{ else }}
        {{ .Title | singularize}}
        {{ end }}
      </a>
      {{ end }}
      {{ end }}
      {{else}}
      <a class="nav-link" href="{{ if $isHome }}#{{ .File.TranslationBaseName }}{{ else }}{{ printf "#%s"  (.File.TranslationBaseName | urlize) | relLangURL }}{{ end }}">{{ .Title | markdownify }}</a>
      {{ end }}
      {{ end }}
      {{ end }}
      {{ end }}
    </li>
  </ul>
   </div>
 </nav>

I’ve crossposted this to stackoverflow and netlifys deployment community. Just trying to find some answers.

Thanks! :slight_smile:

More helpful would be:

  • the whole repository to test
  • the netlify configuration, if you have any or the info that you have none
  • things like how bootstrap (looks like your nav is a bootstrap-nav) is configured in your repo/website.
  • where is your “site” (the one you are looking at where the hamburger does not hamburger itself)
  • whats the output of the netlify deployment process

define “properly initialized” (that most probably is an opinion, not a fact, hehe).

From the sounds of your description (black box), I would assume that the javascript is not created and not linked (thus no console error).

@davidsneighbour

This is the Netlify thread in context: https://community.netlify.com/t/deploying-my-website-breaks-navigation-hamburger-in-mobile-view/27541/5

And here’s the link: https://www.zackgoertz.com/

@davidsneighbour @Hrishikesh has helped me find some answers on the Netlify board working on them right now! :slight_smile:

CORS :wink: tststs.

@davidsneighbour Scratching my head trying to figure this thing out but shared the repo with @Hrishikesh

Issue was from the footer script partial including the wrong JS. Thanks to both of you ! :slight_smile:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.