Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #441519

    Hi there,

    I followed the instructions here to build a widget in the header to display a Message on the right of the logo, as described in http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/.

    Anyhow I managed it to be as I intended, and it works good in Chrome and Firefox, but in Safari Desktop (all Mac) and iPad it slides right off the screen.

    Do you have any suggestions how to solve this?

    Thanks in advance!
    Andreas

    #441886

    Hi moviestar007!

    Please try the following CSS instead of your current one:

    #header .widget {
      padding-top: 0;
      position: absolute;
      top: -100px;
      width: 470px;
      right: 5%;
    }

    Best regards,
    Rikard

    #441933

    Hi Ricard,
    that’s perfect, great support!!

    Thank you
    Andreas

    #441934

    sorry, one more:

    on the ipad the widget text is now positioned about 15px lower than on desktop browsers, so it’s not on the same level as the logo. When I change the width of the browser window on safari desktop this does not appear.
    Would be great if you have a suggestion for this!

    Andreas

    #442182

    Hey!

    Please try adding this as well, after the other code:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    #header .widget {
      top: -85px !important;
    }
    }

    Cheers!
    Rikard

    #442305

    thak you.

    This works well on my iPad (with -120px), but on narrow browser screens on the desktop it is shifted in the other direction and it’s aligned a few pixels above the logo.

    Do you know if there are special classes or different behavior on the iPad? Unfortunately I do not have other tablet models to test it with, so I usually simulate it by resizing the window width.

    rgds
    Andreas

    #444085

    Hi!

    Please try the following instead:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    #header .widget {
      top: -100px;
      right: 0%;
    }
    }

    There should not be any significant difference between a desktop and tablet browsers so I think simulating on your desktop browser should be enough.

    Best regards,
    Rikard

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