Put a button in a Hugo menu with the Academic theme

Hi all,

I want to add a nice looking button to my Hugo menu. This is what tried.

[[main]]
  name = ""
  pre = '<button type="button">Plan a free meeting!</button>'
  url = "#free-meeting"
  weight = 100

By adding this in config/_default/menus.toml I get the following result.

However, this is not what I want. I like the look of our call to action (cta) button.

[cta]
  url = "https://sourcethemes.com/academic/docs/install/"
  label = "WhatsApp ons"
  icon_pack = "fas"
  icon = "phone

Is it possible to add such a button in my menu with a call to action look? I was thinking something along the lines of adding this to our config/_default/menus.toml

[[main]]
  [cta]
    url = "https://..."
    label = "Plan a free meeting!"
    icon_pack = "fas"
    icon = "phone"

But this didn’t work.

Kind regards,
Rainymood

We don’t know what theme you use and how your templates are written …

Most themes have a navigation template, where the menu is rendered. Add your button in this template.

something like

	<ul id="menu">
	{{ range site.Menus.main }}
		<li><a href={{ .URL }}>{{ .Name | markdownify }}</a></li>
	{{ end }}
     <li><button type="button" id="meeting">Plan a free meeting!</button></li>	
    </ul>

Add a action or JS to make it working

Thank you for your support.

Here is all my code publicly available link

I’m using the academic theme found here

I can find the navbar code under themes/academic/layouts/partials/navbar.html but this is specifically not a “widget”, widgets are under themes/academic/layouts/partials/widgets. I’m wondering how/if I can overwrite this base html…

Update: Of course it is explained clearly in the docs here and I just glossed over it.

Thank you!

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