Hi, I have never asked the Community a question before and I am very amature at website coding. I am in charge of creating and managing the website for a very tiny nonprofit that I’m a part of.
I created a child theme because I needed to make some customizations to the theme we’re using and the header menu dropdown arrows are not displaying properly in the child theme. I have looked through the code in Design Manager and I cannot figure out what the issue is.
I am hoping someone here can help me identify the issue.
The screeshot below is how the arrows look using the original theme:
Child theme inheritance issues like this can happen when the CSS for specific UI elements doesn’t carry over as expected. It’s possible styling from the parent theme isn’t being inherited in your child theme, but the specifics can vary depending on which theme you’re working with and how the child theme was set up.
A few resources that may be helpful as a starting point:
From the screenshots I’d say that the parent theme uses something like FontAwesome (or just the HubSpot icon function) for displaying the down arrow. The code/icon library seems to be missing in the child-theme - therefore the icon is a different one.
As it’s quite hard to dig deeper without looking into the actual code, could you please share a preview link to a page with the original/parent theme navigation and one with the child-theme?
Important: Please don’t share the page-editor link as nobody who’s not in your portal would be able to access it. The best thing would be to share the actual URL. To do so, click on “preview” and copy the URL or open the preview in a new tab and copy the URL from the browser.
Hi @Bikeology this is a really common issue when creating a child theme, so no worries about being new to this. What you’re seeing — the arrow pointing right/sideways instead of down — usually happens because of one of these:
The arrow isn’t actually an image, it’s a font icon character (like FontAwesome) styled with CSS, and the rotation transform got dropped. Many HubSpot themes use a :after pseudo-element with content: "\f078" (or similar) plus a transform: rotate(...) to point it down. If your child theme’s CSS only partially inherited or overrode the parent’s menu CSS file, the rotation rule can get lost while the icon itself still shows — which is exactly the “wrong direction” symptom you’re describing.
Where to look in Design Manager: search the theme’s CSS files for hs-item-has-children — that’s the standard class HubSpot uses on menu items with dropdowns. Look specifically for a rule targeting :after or :before on that class, and check whether it includes transform: rotate(), content:, or a background-image pointing to an arrow icon. Compare that exact rule between your parent theme’s CSS file and your child theme’s — if the child theme has its own copy of that file (rather than inheriting it), it’s likely out of sync with the parent’s version.
Quick way to confirm the cause: open your child theme page in a browser, right-click the sideways arrow → Inspect. Look at the Styles panel for that element — if you see a transform: rotate(90deg) (or similar) rule that’s crossed out/overridden, that confirms it’s a CSS specificity or inheritance issue, not a missing icon.
If you’re not comfortable editing the CSS directly once you find the rule, you’re welcome to share a link to your site (or paste the relevant CSS snippet here) and I can help pinpoint the exact fix. In the meantime, this HubSpot doc on child themes is worth checking too, in case a required file wasn’t fully carried over during setup: developers.hubspot.com/docs/cms/building-blocks/child-themes
