Issue: Menu entry begins with capitalization

support
1

Hello All,
I don’t know if this question has been answered before, but one user of my hugo theme would like to have “as-is” Menu case. (and not sentence case)

For example, if I type “about” in config under “menu.main”, it appears as “About”, but the user would like it to be “about”.

Can someone please help with this?

Thanks
Bala

This is the code I use for the menu with dropdowns.

<nav id="main-nav" class="clearfix">
  <div class="container clearfix">
    <ul class="root">
      {{ $currentPage := . }}
      {{ range .Site.Menus.main.ByWeight }}
      <li class="menu-item menu-item-type-post_type menu-item-object-page {{if $currentPage.HasMenuCurrent "main" . }} active{{end}}">
	<a href="{{ .URL }}">{{ .Name }}</a>
	{{ if .HasChildren }}
	<ul class="sub-menu">
	  {{ range .Children }}
	  <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children">
	    <a href="{{ .URL }}">{{ .Name }}
	    </a>
	    {{ if .HasChildren }}
	    <ul class="sub-menu">
	      {{ range .Children }}
	      <li class="menu-item menu-item-type-taxonomy menu-item-object-category">
		<a href="{{ .URL }}">{{ .Name }}
		</a>
	      </li>
	      {{ end }}
	    </ul>
	    {{ end }}
	  </li>
	  {{ end }}
	</ul>
	{{ end }}
      </li>
      {{ end }}
    </ul>
  </div><!-- .container -->
</nav><!-- #main-nav -->
2

Bala - did you ever find a solution to this.

In my case, one of my menus is “iOS”, which is how Apple spells it. In my case the main menu is coming out as “IOS”, which is incorrect. Even worse, the title shows up as “Ios” on the page itself.

Surely there is a way?

3

Hi John,
Thanks for your reply. I am still puzzled. I haven’t found a solution yet.

However, I guess with the latest hugo version 0.42, the main menu entries don’t change case, however, the sub-menus (or menu children) change the first letter to caps.

E.g. - if you have “iOS” as a main menu entry, it works fine. Trouble starts when you move it to sub menus (or nested menus), “iOS” becomes “IOS”.

I hope this helps you
Thanks
Bala

4

Based on a suggestion in another thread, I ended up hacking my theme files, e.g.:

    {{ range .Site.Menus.main }}
      <div class="col-xs-3 col-sm-2">
        {{ $upperName := upper .Name }}
        <h3><a href="{{ .URL }}">{{ if eq $upperName "IOS" }}iOS{{ else }}{{ upper .Name }}{{ end }}</a></h3>
      </div>
    {{ end }}
2 Likes
5

It’s an old task but I had the same problem (using hugo 0.79).

I could force “as-is” menu case by removing the “text-transform” style in my theme:

.nav-item{
margin: 0;

/*
.nav-link{
text-transform: capitalize;
}
*/
}