Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1228774

    Hello,
    I would like to achieve the following:

    I want different logos to be displayed on different pages, but only mobile

    Example:

    Mobile page “Home” = Logo A
    Mobile page “Contact” = Logo B
    Mobile page “Imprint” = Logo C
    Mobile page “data protection” = Logo E

    or

    Example:
    Mobile page “Home” = Logo A
    Mobile pages “Home” and “Contact” and “Imprint” and “Privacy” = Logo B

    #1229034

    Hi Markus,

    Please try to use this CSS Code in Quick CSS, located in Enfold > General Styling:

    @media only screen and (max-width:767px) {
      #header #header_main .logo img {
        opacity: 0;
        visibility: hidden;
      }
    
      /* Homepage */
      .home #header #header_main .logo a {
        background: url(image_url) center center no-repeat;
      }
    
      /* Page */
      .page-id-1 #header #header_main .logo a {
        background: url(image_url) center center no-repeat;
      }
    
      /* Another Page */
      .page-id-2 #header #header_main .logo a {
        background: url(image_url) center center no-repeat;
      }
    }

    There are 2 things that needs to be changed.
    1. image_url needs to be replaced with the correct image url for that page.
    2. On the last 2 blocks of code you’ll notice they are almost the same except for the number, that number represents the page ID so you’ll need to modify it since we won’t know the correct page ID on your site.
    If you need to use another logo for another page, you can copy the same code (the last block) then replace the page ID number and image url and that should be good.
    Hope this helps.

    Best regards,
    Nikko

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