I'm trying to update the CSS and can't figure it out as to how to get it reflected in the localhost in Chrome.

Can you help?

Your website is required under the EU’s General Data Protection Regulation (GDPR) to let users from inside Europe control the activation of cookies and trackers that collect their personal data.

Maybe this theme can include a way to inform the users of the used cookies.

When removing phone number and business hours from the contact.yaml file, the field labels are not removed from the resulting HTML leading to empty content.

For the love of my life I just cannot get any other image to display than the once that come with the sample site. If I change the image to be displayed, simply no image is displayed (only the blue overlay). Even if I simply open the original hero image and edit it quickly in GIMP and then save it over, hugo just doesn't show any picture at all.

I am changing the hero image path inside the file /content/_index.md and I put my hero image into /themes/hugo-hero-theme/static/images/here.jpg

What am I doing wrong please? I would be so grateful for any help, thank you!!!

I'm trying to change the content on the history page and only the content1 file under the history page is populating properly. The content2 and content3 aren't updating properly. The content that should be controlled with the content2 file is not being changed by anything. The content that should be controlled by content3 under History is actually being populated by the content3 file in the About folder.

Hi,

I am building a dropdown menu on our website. I see that there was a previous issue (now closed) with a solution but I wasn't able to make it work that way. I used this tutorial: https://codingnconcepts.com/hugo/nested-menu-hugo/ and it worked mostly (still working on making it look nice). One issue I cannot solve:
Right now I need to click on the menu item to be able to select a tab from the dropdown menu. If I just hover the dropdown menu doesn't stay. How can I fix that?

Thank you!

I'm quite the hugo noob, but I love your theme and I'm using it to build my site. As with any site there's small tweaks I want to make, and it seems like these tweaks are kind of outside the scope of what hugo themes in general are trying to do. I got as far as https://discourse.gohugo.io/t/how-to-override-css-classes-with-hugo/3033/4, which seems to say that customizing css from themes is not that easy unless the theme developer specifically adds a hook for it. Is there something that I'm missing or is that what would be required for what I'm asking?

Hugo version: 0.870+extended
Problem exists in this theme, but not in a new theme when the relevant view templates and configs are ported in. Problem does not present itself when the site is viewed with hugo server but is present in build artifacts. It is present in other Hugo projects that use this theme.

themes/hugo-hero-theme/layouts/_default/baseof.html:16-17

 {{ $style := resources.Get "scss/style.scss" | toCSS (dict "targetPath" "css/style.css" "enableSourceMap" false) }}
  <link rel="stylesheet" href="{{ ($style | minify | fingerprint).RelPermalink }}">

This code, when using RelPermalink OR Permalink results in the following output:

#build output
  <link rel="stylesheet" href="/mywebsite.com/css/style.min.1cd4c[...].css">
#local server output
  <link rel="stylesheet" href="//localhost:1313/css/style.css">

expected output:

  <link rel="stylesheet" href="/css/style.min.1cd4c[...].css">
  # or
  <link rel="stylesheet" href="mywebsite.com/css/style.min.1cd4c[...].css">

Followup:
When BaseURL = /, the build output results in a relative path

  <link rel="stylesheet" href="/css/style.min.1cd4c[...].css">

regardless of whether or not you use Permalink or RelPermalink

This is the same as issue #7 , here are the steps I followed (taken verbatim from the Readme):
$ hugo version
Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown
$ hugo new site mynewsite
Congratulations! Your new Hugo site is created in ...
$ cd mynewsite
$ cd themes
git clone https://github.com/jugglerx/hugo-hero-theme.git

config.toml reads:

baseURL = "/"
themesDir = "themes"
theme = "hugo-hero-theme"

$ hugo

Error: Error building site: failed to render pages: render of "home" failed: "/Users/andrewehrlich/andrew/Companies/regulus/engineering/website/mynewsite/themes/hugo-hero-theme/layouts/index.html:23:30": execute of template failed: template: index.html:23:30: executing "main" at <$headless.Resources....>: can't evaluate field Resources in type *hugolib.Page

Thanks for the great theme.
Can you direct me to where I scale the logo size? I have tried changing the details in the HEADER.html partial but the image size remains the same

This Hugo Hero theme is a beautiful theme and thanks for building it. I'm noticing an issue and am wondering if you could either fix it or tell me a work around. If you look at the page in exampleSite/content/services/accounting.md you can see a numbered list followed by a bulleted list in the markdown. However when I build the theme myself or even if I go to your live demo site at https://hugo-hero.netlify.app/services/accounting/ the numbers and the bullets do not show. How can we get these to appear? Thanks.

Hi.

So currently, when you scroll down on homepage in the example website, you see all 6 services links and a button called VIEW ALL SERVICES. Is there any way to change the button text? Maybe show only 2 important services rather than all? How do I control that section?

I see that under /content/homepage/, I can change the weight in the two files work.md and about.md which changes their respective position on the homepage. It seems like Our Services section on the homepage is hard-coded? Is this something to do with headless : true?

Sorry, but I am a bit lost. Also, I am quite new to Hugo in general (have a decent grasp on Markdown and web development).

Any help/suggestion would be very much appreciated.
Thanks.

Hi,

I am trying to change the names of the "services" (New: Offerings) and "work" (New: Methods) sections. I followed this documentation , but that only renames the folders and menus. In the content/en/_index.md file I have the following in the Frontmatter:

services:
  enabled: true
  show_view_all: true
  sort_by: "weight" # "date" "weight"
  limit: 2
 ...
work:
  enabled: true
  show_view_all: false
  limit: 4

What do I have to do to make this work with the renamed sections?
And this also creates additional Menu Items "work" and "services". How can I rename them as well?

I like this feature of the Theme, to display the "services" and "work" dynamically. So I would like to use it, but under another name...

Any help will be much appreciated!

Yonz

Please add the option to make the navbar sticky, or make it default.

Thanks!

Hi, the down arrow on the home page of the theme is supposed to show at the bottom of the hero image but on mobile devices it is hidden by the device UI. I fixed it for my web site by amending _hero-image.scss to change .container to remove height and replace with min-height: 80dvh . I also animated the down arrow but that isn't essential for the fix. I attach my version of the file in case you want to use it.
_hero-image.scss.zip

Maybe I'm blind, but I can't find where data from the social.yaml file is bein used.

Hi,

I am currently using the hero theme for hugo. I've been trying to add a dropdown menu in the navbar. I've seen from other themes that they use a "submenu" and use the parent and children identifier in the config.toml. I've also seen some people suggest the reason submenu isn't working for them is because their theme doesn't support it. I can't find any documentation for the hero theme to tell if it supports submenu. I wanted to ask just in case it's not supported for hero theme.

Best,
William

Hi.

I followed the instructions for the installation on my Mac (M1) with Hugo extended installed (Hugo v0.115.2+extended darwin/arm64 BuildDate=unknown)

When I enter
hugo
to create the site I get the error

Start building sites …
hugo v0.115.2+extended darwin/arm64 BuildDate=unknown

Total in 22 ms
Error: error building site: assemble: "/Users/me/Code/Skarp/hero-theme/content/pages/about/index.md:11:1": failed to extract shortcode: template for shortcode "content-strip-left" not found

Any idea what I'm doing wrong?

Thanks again for a great theme.

I've discovered an issue though in that lists are not rendered. For example, if I run Hugo server locally against the exampleSite and I update the _index.md file in content/contact to the following:

---
title: 'Contact'
date: 2018-02-22T17:01:34+07:00
---

We offer a free consultation for all new clients.

- Call
- Us
- Today

When this renders, I get:

The current netlify.toml allows a push that servers out of the exampleSite which is great for just getting started.

Suggest a documentation fix so that there is an alternative build so it serves and you can adjust the Netlify build command to it easily by putting a file in ./exampleSits/netlify.toml and this will overwrite the netlify.toml in the main site. So if you actually do the copy it will build correctly, so

./exampleSite/netlify.toml ha:

[build]
  publich = "public"
  command = "hugo --gc"

This way you have the option to do the quick publish or you have the option to do the publish from main (in production where you don't want to use exampleSite). I can issue a PR for this if you like

Hello,

Excellent theme by the way. My question how do I replace the Hugo hero home page logo on top with "CSVsolutions".

check out my github at
https://github.com/vmandela99/csvsolutions
@JugglerX

I see how to edit the main content, but I am not seeing how to edit markdown files in order to, say, change the GitHub link to point to my own profile. In a related thing, I wound up editing the theme itself to change the URL link in the subfooter and I think that that was not what you intended. Are there markdown files that control these things? Thanks, I love the theme!

Please ignore this issue. My apologies.

Hi, the example site looks nice. Thanks for sharing this theme.

I'm interested in changing "services", everywhere that it appears, to be "features" instead. Ideally on all pages and in URLs. Any advice how I would go about this?

I made the following entry in the config.toml to change the font but it's not taking effect. I copied the google_fonts entry from https://fonts.google.com/specimen/Jost. Can you see anything obvious that I've gotten wrong?:

[params.fonts]
google_fonts = "https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap"
heading = "Jost"
base = "Jost"
monospace = "Jost"

Hello,
thank you for this wonderful theme!

I noticed that part of the typo is cut off on mobile browsers in landscape view.

https://hugo-hero.netlify.app/

I tested this with different browsers on iOS and Android.

As this occurs only at the homepage this should be fixable. In which file do I have to change a value?

All the best
Dave

Here's another problem I found:

Opening the mobile menu causes a content shift. The shift is equivalent to the header / top-navigation height.

Screenshots:

I managed to fix it in one of my customized versions of the hugo-hero-theme.

Screenshots:

I did it by removing this from _header.scss:

.lock-scroll {
  .header {
    &.header-absolute {
      position: static;
    }
  }
}

and changing z-index: 10; to z-index: 100;, so that the menu bar will be visible at all times (above the mobile menu).

I am not sure if that fix would be fine for your purposes, however, the content-shift is a bug.

The "ABOUT" menu item does not get any 'active' attribute when I'm on the /about/ page.
Other menu items work fine.

As I understand contact.yaml is used to edit contact data.

Here's what I have observed:

1. businessName from contact.yaml seems not to be used
2. Office hours are hard-coded in the template

Amazing work you're doing ^^

Just to make things smoother (improved UX) you should consider adding smooth scrolling:

html {
 scroll-behavior: smooth;
}

Pretty simple but it makes a great difference. Keep it up! 🚀

I like the theme a lot but need a blog on my website. Is there documentation somewhere on adding a new section?

You probably already know about this - but i picked up your theme because it looked reasonably impressive and i thought i'd get started with a website using hugo however its comping to my attention that there is text hardcoded in the theme - which seems to be displayed whatever you do

i have observed this in:
https://github.com/JugglerX/hugo-hero-theme/blob/master/layouts/about/about.html
https://github.com/JugglerX/hugo-hero-theme/blob/master/layouts/contact/contact.html
https://github.com/JugglerX/hugo-hero-theme/blob/master/layouts/index.html
https://github.com/JugglerX/hugo-hero-theme/blob/master/partials/header.html

As i don't want to directly edit the theme to add my own data (this is obviously an anti-pattern) i'll be trying to work out how to replace this with content from markdown files (unless you already have a plan for this) I'm extremely new to hugo but it shouldn't take me too long. i'll follow up with a pull request when i'm done

Hi, is there a way to change the accent color (blue)?

Hello again.

I noticed that the day before yesterday you made this commit: bc5c2ba that among other changes introduced a block for meta tags in

layouts/index.html

It would be best if you either defined that block in the Example Site by overriding the theme’s index layout or if you turned these meta tags into config parameters.

Users need to be made aware of these tags and how to modify them. You could add some instructions in the README or comments in the Example Site config.

As things are now users who don’t notice these meta tags will have the ones that point to your theme’s Netlify demo on their personal websites.

cc: @digitalcraftsman

The heading "Our Services" is hard-coded in the layouts/index.html template. The other headings use {{ .Title }} which picks up the title from one of the reusable pages. It would make more sense to take the Services title from /content/services/_index.md using {{ with .Site.GetPage "/services/" }}{{ .Title }}{{ end }}.

I'm happy to provide a PR if you like.

Is it straightforward to add different languages to this website? Is it a matter of having an /en/ and a /de/ folder for both languages, or keep xxx_en.md and xxx_de.md files in the same directories? "en" would be for the English version and "de" for the German one for instance.

I'm using Firefox v99.0 64bit.

The text on the list item is indented, but shows no number for ordered lists nor bullet icon on the unordered list. You can see the effect on the example demo.

I've added some text to my version of the "We Help Business Grow" part of the homepage. (original: https://hugo-hero.netlify.com/#home) The longer text runs over the image of the cell phone, where it becomes dark text on dark background.

I was hoping to modify the CSS to make the paragraph visible no matter the background. But I'm having no luck. I can't seem to make any change to the .scss files such that hugo will update the css. I've searched enough to see Hugo supports pipelines and the toCSS part of the pipeline should do what I hope, but no dice.

For example, I've uncommented the code following // Display breakpoints for DEV in styles.scss, but nothing visible changes in huge server render.

Any pointers appreciated. Thanks in advance.

In /themes/hugo-hero-theme/layouts/index.html, there are extra paragraph tags in two locations that cause invalid HTML.

The first is on line 31:

<p>{{ .Content }}</p>

and the second is on line 64:

<p>{{ .Content }}</p>

Wrapping the {{ .Content }} in paragraph tags means that all the content a user enters in the content section of a markdown file will be wrapped in additional <p> tags.

You can see the problem if you look at the source code for the Home page in the demo, where the "We Help Business Grow" and "Our Difference" sections are both wrapped in unnecessary paragraph tags.

The fix--until this is fixed in the theme--seems to be simply removing the extra paragraph tags on lines 31 and 64, then saving the index.html file in the /layouts folder to override the theme's version.

Looking thru shortcodes/ folder (i.e. bundle-content.html, content-strip-center.html, etc.). Not clear on how to invoke from md content file. Possible to clarify with example?

Showing something like:

{{ < bundle-content "foo" "bar" > }}

tx

when I configure the index file (~/content/_index.md) , change the path of the backgrond image into my image [line 6 : heroBackground: 'images/****.jpg'] . The Web filed to show my image and it only can show the example site's image, how can I due with it ?

Thank you for this very nice theme. First time using Hugo for me so maybe I missed something but while the demo page looks great in Chrome, I noticed that the footer shows up at the top in IE11.
I do see that the is present in the file (even though I thought it should be the first tag after ) and it seems that the browser reads it correctly as in developer mode (F12) under emulation, it shows Edge (Default) via X-UA compatible meta tag.

This is the page I'm referring to:
https://themes.gohugo.io/theme/hugo-hero-theme/

IE version is 11.0.9600.19403 update version 11.0.136

Thank you for your time.

https://hugo-hero.netlify.com/about/

Hey Robert,

would it be possible to compress in the images folder? With 14 Mb alone they make up the majority of the size of this repository. The size could be reduced easily by using just one file-format for the pictures.

Might be a remnant from serif theme.

also /static/features/*.svg

Trying to understand all the configuration. I spent awhile trying to figure out how this file is used.

Copyright text has bad layout at reduced screen widths.

Does this theme support the Jekyll or GitHub page version? or if not, is there a possibility in the future to implement support for jekyll or github pages?