Wordpress альтернативная мобильная версия логотипа - PullRequest
Новая
       0

Wordpress альтернативная мобильная версия логотипа

0 голосов
/ 09 января 2020

на моем веб-сайте WordPress. Я хочу, чтобы в мобильной версии отображалось другое значение go, чем в настольной версии. Мне удается добиться этого, используя следующий код: 

@media only screen and (max-width: 981px) {
  #logo {
    content: url("URL OF MOBILE LOGO");
  }
}

Это работает довольно прилично, но теперь у меня есть большие проблемы. Ссылка для этого lo go отсутствует. Обычно lo go должен ссылаться на "/ home /", однако это не так.

Я пытался добавить ссылку в шапке через html со следующим кодом:

<a id="logo" href="/"><span>Return to Home Page</span></a>

Это просто клонирует мобильный телефон lo go и вставляет над или под заголовком. Но со ссылкой: / ...

Не могли бы вы, ребята, помогите мне в этом:)

С уважением,

Мариус

1 Ответ

0 голосов
/ 09 января 2020

Вы можете использовать JQuery append () для достижения этой цели.

Итоговый код: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    @media only screen and (max-width: 981px) {
      .mobileLogo a:before {
        content: 'MobileLogo';
        display: block;
      }
    }
  </style>
</head>

<body>
  <header>
    <div class="desktopLogo">DesktopLogo</div>
    <!-- append mobileLogo here -->
  </header>
  <!-- jquery cdn -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <!-- custom script -->
  <script>
    $('header').append('<div class="mobileLogo"><a href="/"></a></div>');
  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...