Site logo

[Resolved] SVG link in logo doesn’t work

Home Forums Support [Resolved] SVG link in logo doesn’t work

Home Forums Support SVG link in logo doesn’t work

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2484497
    Jan

    Hello,

    We are using an SVG logo, which I placed in the header element. For some reason the link doesn’t work on WordPress. When I place the below HTML code in a separate file, it works. Turning off all the plugins (except GP) didn’t make a difference.

    Thanks for any thought where to look next.

    Jan

    Page header element:
    -----------------------
    <div class="navbar-logo-embed">
    <a href="https://brejcha.name/mona">
    <svg width="180" height="45" viewBox="0 0 469 118" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M189.591 118H159.594L159.406 116.183C157.285 97.1095 154.18 78.1613 150.091 59.4087C145.416 38.651 140.057 23.3149 134.377 14.1133C129.709 21.8896 126.024 33.1523 122.417 44.2055C115.649 64.9353 109.25 84.5123 95.8459 84.5123C90.8359 84.5123 86.5027 81.4101 82.4766 77.1482C79.0226 81.7246 74.9616 84.5123 69.9027 84.5123C61.6621 84.5123 55.2356 76.1002 49.0254 67.9676C47.6857 66.2139 46.339 64.4462 44.9714 62.7694C42.0477 67.9326 39.2845 75.0172 36.8005 83.8346C33.9047 94.4755 31.6998 105.298 30.2135 116.225L29.9902 117.993H0L0.286086 115.722C1.80025 104.606 4.0401 93.6021 6.98469 82.7796C13.3553 60.1354 21.3797 48.656 30.8345 48.656C35.991 48.656 40.4219 51.7861 44.5178 56.09C48.2788 51.1433 52.3677 48.656 56.7707 48.656C65.3044 48.656 71.8565 57.2288 78.1853 65.5152C79.4482 67.1641 80.7182 68.8269 82.0021 70.4199C86.0492 63.1886 89.3845 52.9739 92.657 42.9478C99.551 21.8407 106.682 0 121.768 0C126.199 0 130.413 2.39647 134.384 7.15448C138.061 2.71786 142.394 0 147.711 0C154.933 0 161.604 6.37894 167.521 18.9622C172.029 28.548 176.222 41.8649 179.983 58.5494C184.1 77.4486 187.233 96.5436 189.368 115.764L189.591 117.993V118ZM163.223 113.962H185.098C184.267 106.716 181.33 82.9263 176.034 59.4157C167.981 23.7062 157.927 4.04536 147.704 4.04536C143.504 4.04536 139.966 6.47676 136.854 10.4802C138.64 13.1841 140.217 16.0277 141.578 18.9692C146.085 28.555 150.279 41.8719 154.04 58.5563C158.024 76.8617 161.087 95.3488 163.223 113.962ZM4.59831 113.962H26.4595C27.9667 103.447 30.1228 93.0362 32.9139 82.7865C35.698 72.8932 38.7891 65.1449 42.1873 59.5345C38.5658 55.587 34.8048 52.7084 30.8206 52.7084C23.6056 52.7084 16.5162 63.7685 10.8643 83.8485C8.16392 93.7488 6.07061 103.81 4.59134 113.969L4.59831 113.962ZM84.7862 73.7107C88.3448 77.6233 92.0151 80.4879 95.8459 80.4879C106.326 80.4879 112.557 61.4139 118.579 42.9618C122.48 31.0214 126.457 18.8504 131.9 10.5291C128.578 6.25318 125.18 4.05234 121.754 4.05234C109.599 4.05234 102.928 24.4747 96.4739 44.2194C92.8454 55.3215 89.3287 66.1021 84.7792 73.7107H84.7862ZM47.2531 59.1991C48.9487 61.2253 50.6024 63.3912 52.2352 65.5362C57.8522 72.8863 63.6577 80.4949 69.9027 80.4949C73.6567 80.4949 76.8665 78.0425 79.7204 74.0461C78.1015 72.1037 76.5246 70.0356 74.9616 67.9885C69.2259 60.4777 63.2948 52.7154 56.7567 52.7154C53.5191 52.7154 50.3163 54.9372 47.2461 59.1991H47.2531ZM258.936 88.7463V88.2782L263.15 83.4992V54.8953C263.15 50.2071 260.715 47.4893 256.41 47.4893C253.696 47.4893 250.884 48.705 248.072 51.1433V83.7787L252.286 88.2782V88.7463H229.057V88.2782L233.272 83.7787V48.8936L228.311 43.926V43.4579L246.013 38.8606H246.948L247.604 47.6779H248.26C253.319 41.7671 258.559 38.8606 264.274 38.8606C270.826 38.8606 275.696 42.4238 277.385 47.8665H277.943C283.281 41.7741 288.431 38.8606 294.145 38.8606C302.198 38.8606 307.913 44.3033 307.913 51.9888V83.7787L312.127 88.2782V88.7463H288.808V88.2782L293.113 83.4992V54.8953C293.113 50.2979 290.489 47.4893 286.275 47.4893C283.651 47.4893 280.839 48.705 277.936 51.1433V83.7787L282.242 88.2782V88.7463H258.929H258.936ZM313.537 65.0191C313.537 49.4525 323.745 38.8536 339.012 38.8536C354.279 38.8536 363.734 48.7958 363.734 64.0829C363.734 79.37 353.526 90.1506 338.259 90.1506C323.277 90.1506 313.537 80.2154 313.537 65.0191ZM348.565 67.2689C348.565 52.0796 344.259 42.6963 337.512 42.6963C331.797 42.6963 328.706 49.1661 328.706 61.7353C328.706 76.9246 333.011 86.3079 339.759 86.3079C345.467 86.3079 348.558 79.8381 348.558 67.2759L348.565 67.2689ZM385.274 83.7717L389.489 88.2712V88.7393H366.26V88.2712L370.475 83.7717V48.8866L365.514 43.919V43.4509L383.216 38.8536H384.151L384.807 47.6709H385.463C390.612 41.7601 396.139 38.8536 402.321 38.8536C410.659 38.8536 416.465 44.2963 416.465 51.9818V83.7717L420.679 88.2712V88.7393H397.36V88.2712L401.665 83.4922V54.8883C401.665 50.291 398.853 47.4823 394.359 47.4823C391.359 47.4823 388.366 48.698 385.274 51.1364V83.7647V83.7717ZM449.707 82.2695H449.051C443.992 87.4258 438.466 90.1436 433.316 90.1436C426.576 90.1436 421.984 85.6441 421.984 79.2652C421.984 72.1387 427.79 66.8846 441.089 62.2943L449.239 59.3878V54.3223C449.239 50.1023 446.148 47.4753 440.908 47.4753C435.193 47.4753 429.478 50.6613 426.017 55.9153L425.64 55.7267C427.699 45.0369 435.381 38.8466 446.713 38.8466C456.922 38.8466 464.039 43.8142 464.039 51.0385V80.8582L469 83.4852V83.9533C467.046 87.7402 463.146 90.1297 458.882 90.1436C454.019 90.1436 450.181 86.8668 449.707 82.2695V82.2695ZM442.868 82.1717C445.325 82.1508 447.655 81.0538 449.239 79.1744V62.7624L444.836 64.4532C438.466 66.8916 435.381 70.2662 435.381 74.5841C435.381 78.9857 438.473 82.1787 442.875 82.1787L442.868 82.1717Z" fill="currentColor">
    </path>
    </svg>
    </a>
    </div>
    
    CSS:
    ------------------------
    @namespace svg url(http://www.w3.org/2000/svg);
    
    svg|a:link,
    svg|a:visited {
      cursor: pointer;
    	color: black;
    }
    #2484542
    David
    Staff
    Customer Support

    Hi there,

    its because the page-hero sits behind the merged site header. You cannot click through the site header to get to it.
    So use this CSS:

    .header-wrap + .page-hero {
        position: relative;
        z-index: 1000;
        pointer-events: none;
    }
    .header-wrap + .page-hero a {
        pointer-events: auto;
    }

    It will move the page-hero in front, disable its pointer events so it doesn’t block the navigation items. And then we just add pointer events to the link in the page hero.

    #2488843
    Jan

    Hi David, Thanks for your help, your suggestion solved the issue.
    Jan

    #2488909
    David
    Staff
    Customer Support

    Glad to hear that

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.