Issues Customizing Ananke Nav Menu

[RoninTech]

I just implemented site search on my Ananke Hugo site using pagefind. I would like to replace the nav menu string item "Search" with a small image of a magnifying glass. Ideally, the Search icon would be next to the other (social) icons, so I need to move Search to the end, after "Contact".

Here is my hugo.toml menu config:

`[menu] [[menu.main]] name = "Home" identifier = "home" url = "/" weight = 1

[[menu.main]] name = "Travels" identifier = "travels" url = "/travels/" weight = 2

[[menu.main]] name = "Packs" identifier = "packs" url = "/packs/" weight = 3

[[menu.main]] name = "Articles" identifier = "articles" url = "/articles/" weight = 4

[[menu.main]] name = "Van Life" identifier = "van-life" url = "/van-life/" weight = 5

[[menu.main]] name = "About Us" identifier = "about" url = "/about/" weight = 6

[[menu.main]] name = "Search" identifier = "search" url = "/search/" weight = 7 `

Some issues I am having:

1. How do I replace the "Search" string with an image?
2. What is auto-generating the "Contact" nav menu item? Even if I add a "Contact" section to my hugo.toml I can make a new Contact menu item appear (anywhere in the list), but the original Contact still stays at the end of the nav links, before the social icons.

My website can be viewed here and it's github is here.

[RoninTech]

Solution for Issue 1

I used the "pre" menu property to define the img element that shows the search icon and changed the name to a single space. If I don't put a space in for name, Hugo sets name to be the title defined in the page's front matter. So in my case, "Search the Site". Since I only want the search icon and no text, I bodged it with the space.

  [[menu.main]]
    name = " "
    pre = '<img src="/images/search-left-grey.png" alt="Search" title="Search page" height="24">'
    identifier = "search"
    pageRef= "/search"
    weight = 8

To get the "pre" property to add the search icon, I modified my ananke theme's layouts/partials/site-navigation.html to include it when setting up the menu.

New issues:

3. Anyone have an idea on how to do this without needing the space bodge?
4. After changing the search menu item from a string to an image, the menu bar no longer looks centrally aligned as it transitions from string menu items to the new image menu item to the social icons. Compare the before and after images above to see what I mean. Any ideas on how to fix that?

Solution for Issue 2

I had a menu: main in my contact.md file's front matter which was leftover from when I first played with the site menu. This was causing a Contact entry to always appear at the end of the nav menu. I removed that and added a contact section before the search section in my hugo.toml and the extra Contact menu item was gone.

  [[menu.main]]
    name = "Contact"
    identifier = "contact"
    pageRef= "/contact"
    weight = 7

  [[menu.main]]
    name = " "
    pre = '<img src="/images/search-left-grey.png" alt="Search" title="Search page" height="24">'
    identifier = "search"
    pageRef= "/search"
    weight = 8

[RoninTech]

OK, after reading a new post today I saw that we can extend the social icons. So in a few minutes I found search.svg and home.svg (file name has to match name parameter) icons and added the following social entries to hugo.toml:

[[params.ananke_socials]]
name = "search"
url = "/search"
label = "Search"
[[params.ananke_socials]]
name = "home"
url = "/"
label = "Home"

I also removed the "Home" nav menu link since it is now replaced by the new social icon. As you can see this keeps everything looking nice and centred, and no bodging in a space to make it work. I got there in the end. :-)