SVG in main menu changes colour depending on sidebar visible or not (mainroad theme)

Using Themes
1

Hello together, i’m using currently the mainroad theme ( github .com/Vimux/Mainroad ) as its the same as the old wordpress-theme we are using. I managed to set up most of the stuff, but i have on problem thats leaving me a bit stumped:

Current behavior

Text in menu is white. On start-page with sidebar, all the icons are white as well. When switching to a page without sidebar, the icons turn black, while the text stays white.

Expected behavior

Icons stay white, even on pages without sidebar.

Reproduce

Unfortunately i cannot reproduce it right now “from zero” on this computer. Could do probably next week again.

[menus]
    [[menu.main]]
        name = "Über uns"
        url = "/"
        pre = '<svg width="18" height="18" viewBox="0 0 512 400"><path d="m267 474-.8-.13a.85.85 0 0 0 .8.13m181.9-286.22a5.51 5.51 0 0 0-10.67-.63A5.52 5.52 0 0 1 433 191h-15.47a5.5 5.5 0 0 1-2.84-.79l-22.38-13.42a5.5 5.5 0 0 0-2.84-.79h-35.8a5.5 5.5 0 0 0-3.06.93l-44.15 29.43A5.52 5.52 0 0 0 304 211v41.74a5.51 5.51 0 0 0 2.92 4.87l57.89 30.9a5.55 5.55 0 0 1 2.92 4.8l.27 23.49a5.53 5.53 0 0 0 2.85 4.75l23.26 12.87a5.54 5.54 0 0 1 2.85 4.83v48.6a5.52 5.52 0 0 0 9.17 4.14c9.38-8.26 22.83-20.32 24.62-23.08q4.44-6.87 8.33-14.07a207.4 207.4 0 0 0 13.6-31c12.68-36.71 2.66-102.7-3.78-136.06M286.4 302.8l-61.33-46a4 4 0 0 0-2.4-.8h-29.1a3.78 3.78 0 0 1-2.68-1.11l-13.72-13.72a4 4 0 0 0-2.83-1.17h-53.19a3.79 3.79 0 0 1-2.68-6.47l8.42-8.42a3.78 3.78 0 0 1 2.68-1.11h32.37a8 8 0 0 0 7.7-5.83l6.89-24.5a4 4 0 0 1 2-2.47L206 177.06a3.79 3.79 0 0 0 2.05-3.37v-12.5a3.8 3.8 0 0 1 .68-2.17l14.6-21.02a3.75 3.75 0 0 1 1.78-1.38l20.43-7.67a3.79 3.79 0 0 0 2.46-3.55V114a3.8 3.8 0 0 0-1.69-3.16l-20.48-13.62A3.83 3.83 0 0 0 222 97l-27.88 13.94a3.78 3.78 0 0 1-4-.41l-13.22-10.45a3.8 3.8 0 0 1 .1-6l10.74-7.91a3.78 3.78 0 0 0-.09-6.16l-16.73-11.67a3.78 3.78 0 0 0-4-.22c-6.05 3.31-23.8 13.11-30.1 17.52a209.5 209.5 0 0 0-68.16 80c-1.82 3.76-4.07 7.59-4.29 11.72s-3.46 13.35-4.81 17.08a3.78 3.78 0 0 0 .24 3.1l35.69 65.58a3.74 3.74 0 0 0 1.38 1.44l37.55 22.54a3.78 3.78 0 0 1 1.81 2.73l7.52 54.54a3.82 3.82 0 0 0 1.61 2.61l29.3 20.14a4 4 0 0 1 1.65 2.48l15.54 73.8a3.6 3.6 0 0 0 .49 1.22c1.46 2.36 7.28 11 14.3 12.28-.65.18-1.23.59-1.88.78a48 48 0 0 1 5 1.16c2 .54 4 1 6 1.43 3.13.62 3.44 1.1 4.94-1.68 2-3.72 4.29-5 6-5.46a3.85 3.85 0 0 0 2.89-2.9l10.07-46.68a4 4 0 0 1 1.6-2.42l45-31.9a4 4 0 0 0 1.69-3.27V306a4 4 0 0 0-1.55-3.2"/><path d="M262 48s-3.65.21-4.39.23q-8.13.24-16.22 1.12A207.5 207.5 0 0 0 184.21 64c2.43 1.68-1.75 3.22-1.75 3.22L189 80h35l24 12 21-12Zm92.23 72.06 16.11-14a4 4 0 0 0-.94-6.65l-18.81-8.73a4 4 0 0 0-5.3 1.9l-7.75 16.21a4 4 0 0 0 1.49 5.11l10.46 6.54a4 4 0 0 0 4.74-.38m75.41 20.61-5.83-9c-.09-.14-.17-.28-.25-.43-1.05-2.15-9.74-19.7-17-26.51-5.45-5.15-7-3.67-7.43-2.53a3.77 3.77 0 0 1-1.19 1.6l-28.84 23.31a4 4 0 0 1-2.51.89h-14.93a4 4 0 0 0-2.83 1.17l-12 12a4 4 0 0 0 0 5.66l12 12a4 4 0 0 0 2.83 1.17h75.17a4 4 0 0 0 4-4.17l-.55-13.15a4 4 0 0 0-.64-2.01"/><path d="M256 72a184 184 0 1 1-130.1 53.9A182.77 182.77 0 0 1 256 72m0-40C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32"/></svg>'
        weight = 10
  • Add sidebar to one page and add to frontmatter sidebar: right or delete it on the other page (or sidebar: false)
--
title: 'OpenStreetMap Austria'
date: 2024-12-01T00:00:00+02:00
sidebar: right # Enable sidebar (on the right side) per page
---

Additional info

I searched this forum (but “svg colour” and “svg color” does not help a lot to be honest :smiley: ) and i made a issue on github as well, but the theme-maintainer seems to be absent. SVG added to mainmenu via "pre" changes colour depending on sidebar visible or not · Issue #388 · Vimux/Mainroad · GitHub
I have not tried chaning anything in the CSS currently because maybe there is a “proper” fix that i can mention in the github-issues of the theme as well. If needed, i can provide a link to the test-website as well.

This colour-change would be nice if it could get solved, so i can quickly switch away from WordPress. I will look for a new and more modern theme after that - if this can be solved quickly.

Thanks in advance for any guidance or suggestions!

2

this sounds like you cannot reproduce the issue with this setup…if so

  • following will not help to analyse
  • there must be something in your site…
    maybe you can strip down content fules and get a reproducable examle
3

That theme author won’t help you (I find him obnoxious, just check his comments on closed issues). If I were you, I would fork the theme (and maintain it yourself) or switch to another theme.

4

I’ve manually downloaded Hugo and the theme to reproduce the issue. During the process, I discovered that one of the SVGs I’m using for a social link (for the Matrix protocol / Element messenger) is causing the problem with the icon colors.

What I’ve Found So Far:

  1. Problematic SVG:
    The original SVG I was using (found online somewhere) was faulty. I replaced it with random one and a new one from Matrix Vector SVG Icon - SVG Repo and optimized it using SVGOMG, but the problem persists.
    • The icons in the sidebar are white, except for this specific SVG.
    • If I comment out the line referencing the Matrix SVG, all icons in the menu are black and all icons in the sidebar are white, as expected.
  2. Testing Another SVG:
    I tried a different SVG as well, and everything worked as expected there. However, when I downloaded the same Matrix icon from another source, the same problem occurred. :person_shrugging:
  3. Sidebar and Menu Setup:
  • I have about four icons in the sidebar, linked via:
    icon = "svg/matrix.svg" # Optional. Path relative to "layouts/partials"
  • The menu icons are embedded directly in the file.

Questions remaining (for me at least :smiley: )

  1. Why does this specific SVG behave so strangely? It seems to be an issue with the SVG file itself, but I’m not sure how to diagnose or fix it. I tried an online svg-analyzer but yeah…
  2. How can I make all the menu icons white like the text? I assume this is CSS, but I’d appreciate guidance on implementing a solution.

Thanks for your help!
I’m considering maintaining our own fork of the theme, but I’d like to resolve this issue first.

5
1 Like