Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 4, 2017 at 2:31 pm #755603
    spavli2

    I added widget to the header with these instructions.

    Adding a widget area to the header

    I use this css:

    #header.widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    vertical-align: middle;

    }
    @media screen and (max-width: 1000px) {
    #header .widget{
    display:none }
    }
    .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }

    widget should be inline with logo on the right side..

    What am i doing wrong?

    • This topic was modified 7 years, 8 months ago by spavli2.
    March 4, 2017 at 4:51 pm #755619
    Mike

    Hey spavli2,
    Is this what you are trying to achieve?
    postimage
    Try this code in the General Styling > Quick CSS field:

    #header .widget {
  left: 50%;
  padding-top: 0;
  position: absolute;
  top: 0;
  transform: translate(-50%);
  z-index: 999;
}

    You had no space between #header & .widget
    Best regards,
    Mike

    March 4, 2017 at 5:38 pm #755630
    spavli2

    omg. thanks for quick help.

    Its working.

    March 4, 2017 at 5:47 pm #755632
    Guenni007

    the difference was !

    #header.widget to #header .widget
    the spacebar is missing
    with no space the class has to be directly on the header container
    without space there is a class following the header container.

    you did it right on the media querry – maybe only a careless mistake

    March 4, 2017 at 6:01 pm #755636
    Mike

    Hi,

    @spavli2    , Your welcome and Thank you for using Enfold.

    @guenni007    , Thanks for helping :)

    Best regards,
    Mike

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