Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 21, 2016 at 3:02 pm #569417
    kfranck

    How can I have 2 widgets run parallel in the header of a website? I would like to run a date widget and to the right, a weather widget.

    I added this code to the function.php file:
    add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }

    In also added this code in the custom CSS area:
    #header .widget {
    left: 69%;
    padding-top: 15;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    Can this request be done?
    Thanks,
    kfranck

    • This topic was modified 8 years, 10 months ago by kfranck. Reason: Wrong access link to login
    January 22, 2016 at 3:20 am #569722
    Elliott

    Hey Kurt!

    You would need to set them to float left or right. I tried viewing your page but it keeps timing out for me.

    Or if you want to keep positioning them absolutely like how your currently doing then you can use this to target the second one.

    #header .widget:nth-child(2) {
    position: absolute;
    top: 100px;
    left: 100px;
}

    Cheers!
    Elliott

    January 22, 2016 at 8:33 am #569806
    kfranck

    Elliott:

    I am so close in getting this to work, but I have achieved it yet. The weather widget is right on top of the date widget. I changed the positioning numerous way, but to no avail. Suggestions? Sorry the page kept timing out. The site is esomethin.com/yoursource.

    Here is the code I used:

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

    #header .widget:nth-child(2) {
    position: absolute;
    top: -50px;
    right: 400px;
    }

    Thanks,
    K

    January 23, 2016 at 4:40 am #570451
    Elliott

    Hey!

    Did you try the CSS I posted? This would work also if your just wanting to move it to the right a bit.

    #header .widget:nth-child(2) {
    transform: translateX(100px);
}

    Best regards,
    Elliott

    January 23, 2016 at 7:08 am #570468
    kfranck

    Elliott:

    Just what I needed! I used both of your CSS posts, tweaking the last one a little (300px) to move it to the right.

    Thank you so much.
    K

    January 24, 2016 at 10:30 pm #570931
    Basilis

    Hi!

    We are glad you got that short out!
    Btw, If you have a moment, I would very much appreciate if you could quickly rate the Enfold to themeforest, which wiII heIp us keep the deveIopment up!

    Please do not hesitate to contact us, if you do need anything else.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Add 2 widgets in a header running parallel.’ is closed to new replies.