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

    Dear Team,
    I read some topics and the documentation about widgets and how to implement them, but I struggle a little bit (Endold Version: 4.6.1)

    What I need are 4 widgets as shown in this picture I designed – https://imgur.com/UDJ9DLn
    I added the following code to functions.php:
    `
    add_action( ‘ava_before_bottom_main_menu’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    dynamic_sidebar( ‘header-two’ );
    dynamic_sidebar( ‘header-three’ );
    }`

    Then I also added the following css code to the customizer:

    #header .widget:nth-child(1) {
      left: auto;
      right: 50%;
      padding-top: 0;
      position: absolute;
      top: 15%;
    	transform: translate(-0%);
      z-index: 999999;
    }
    #header .widget:nth-child(2) {
      left: auto;
      right: 25%;
      padding-top: 0;
      position: absolute;
      top: 15%;
    	transform: translate(-0%);
      z-index: 999999;
    }
    
    #header .widget:nth-child(3) {
      left: auto;
      right: 0%;
      padding-top: 0;
      position: absolute;
      top: -25%;
    	transform: translate(-0%);
      z-index: 999999;
    }

    Now I struggle with the following issues (marked in the red rectangles) – https://imgur.com/a/6e6VZoc

    Do you have any hint for me or do you know how to get the result what I designed in the first picture (symbols + text widgets)

    Thank you in advance and Best regards.

    • This topic was modified 3 years, 4 months ago by apflbutzn.
    #1248856

    Hey apflbutzn,

    We cannot see the images.

    You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.

    Best regards,
    Victoria

    #1249079

    Hey Victoria

    I updated my first post and added the links.

    Best regards

    • This reply was modified 3 years, 4 months ago by apflbutzn.
    #1249465

    Any update here? :-)

    Bes regards

    #1249552

    Hi,

    You need to adjust the line height of the paragraphs in your widgets:

    #header .widget p {
      line-height: 15px;
    }

    Then place them all in an absolute position:

    #header .widget {
      position: absolute; 
    }

    Then you need to adjust the position of them individually, by targeting their IDs. This would target the most right one for example:

    #text-4 {
        top: 0;
        right: 0;
    }

    Best regards,
    Rikard

    #1249902

    Yep, that works – thank you very much :-)

    #1250131

    Hi apflbutzn,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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