Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 13, 2016 at 1:52 pm #660398
    stedia

    I have activated the header widget based on this link http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and it works great.

    I’m using this widget to add a simple Call Out text in this header widget.
    I’m using the Logo left and the menu center option

    What I would like to achieve is the following:

    1) align this header widget-text just in the middle/center of the Logo. I have now used “top 28%;” as part of the css – But I’m wondering if there is a better trick to position this always in the middle of the logo;

    2) would it be possible to create 2 or even 3 headers as I would like to tweak these headers based on the device type.
    Header 1 , I would like to position as described above – just in the middle of the logo
    Header 2, I would like to position below the Logo and Mobile menu, then full-width with text centred or left-aligned.
    Would it be possible to activate the appropriate header based on a media-query with the php-script?

    • This topic was modified 8 years, 5 months ago by stedia.
    July 13, 2016 at 2:11 pm #660412
    Yigit

    Hi stedia!

    Can you please post the link to your website?

    Best regards,
    Yigit

    July 13, 2016 at 2:26 pm #660429
    stedia

    See the private section for the link

    In addition to the above first point:
    1) align this header widget-text just in the middle/center of the Logo. I have now used “top 28%;” as part of the css – But I’m wondering if there is a better trick to position this always in the middle of the logo;

    I would like to see this text also be aligned with the middle of the logo when you scroll down. Now the logo is changing in size and the text remains on the same position.

    July 15, 2016 at 4:21 pm #661416
    Rikard

    Hi,

    It looks like the text in the widget is too big to fit inside the header after the header shrinks, you can try the following to change the position after scroll though: 

    .header-scrolled #text-27 {
    top: 10px !important;
}

    Thanks,
    Rikard

    • This reply was modified 8 years, 5 months ago by Rikard.
  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.