Comments (2)
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:
- Anyone have an idea on how to do this without needing the space bodge?
- 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
from gohugo-theme-ananke.
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. :-)
from gohugo-theme-ananke.
Related Issues (20)
- HELP Post image titles missing
- can't get social icons to display HOT 1
- Command Error of Theme: failed to load modules HOT 3
- (closed)
- Text in Goat diagrams is too big
- adding new service svg icon not updated when theme is added as git submodule HOT 4
- Update Theme Template to Properly Indicate Current Language
- Changing Twitter social logo to X
- no such template "_internal/google_news.html"
- Use of .RelPermalink broke the multilanguage multihost support HOT 1
- How to paginate articles with date ? HOT 1
- Resize featureimages
- Unnecessary vertical space below posts if commends are disabled
- Unnecessary vertical space on index page if there is no content
- Contribution: fix hard-coded link to section HOT 2
- Images not rendered in alternative language
- Custom CSS - Width of text rendered on Desktop Browser HOT 1
- Cannot display icon for custom social HOT 1
- Title color HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gohugo-theme-ananke.