Add link to backgrund image in navigation

  • Author
    Posts
  • #155765

    noirmagazinemx
    Original poster

    Hi there.

    Since I cant find a way to edit theme files. Is there any way to add a link to a backgrund image added by aditional CSS in nav#site-navigation::before?

    This is the site:
    https://noirmagazine.mx/

    This is the adittional code:
    nav#site-navigation::before {
    background-image: url(https://i0.wp.com/noirmagazinemx.wpcomstaging.com/wp-content/uploads/2020/06/LOGONOIR150-2.png);
    background-position: center;
    background-repeat: no-repeat;
    height: 100px;
    content: “”;
    display: inherit;
    }

    I would like to put a “home” link to the image displayed in navigation.

    Thanks in advance,

    The blog I need help with is: noirmagazine.mx

    #155786

    thelukemcdonald
    Theme Author

    You won’t be able to add a link to an item using CSS. Your best bet would be to use the custom header functionality already included in the theme. After adding a custom header image, you can then use some custom CSS to position the Site Title, which has a link to the homepage, to have an absolute position over the custom header image.

    Assuming you have added a custom header image, you can try the following *untested* custom CSS which should get you close.

    .has-header-media .site-title a {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

The topic ‘Add link to backgrund image in navigation’ is closed to new replies.