Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • August 3, 2019 at 12:24 am #1124286
    hostworks

    Trying to add two widgets to header – Header Layout: Widget left, Logo center, widget right, menu below

    Following;

    Header

    and

    Example of Widget left, Logo center, widget right, menu below

    It only added one area on theft and I don’t know how to control it’s display.I’ve attached screenshot of what I’m trying to do.

    August 3, 2019 at 6:14 am #1124319
    Rikard

    Hey hostworks,

    Did you add two widget areas? If so then please add something to both of them so that we can target them with CSS:

    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header1' );
dynamic_sidebar( 'header2' );
}

    Best regards,
    Rikard

    August 5, 2019 at 5:08 pm #1124797
    hostworks

    I added the following, as I want the two items in the main menu linee on opposite sides of the logo.

    add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ ); function enfold_customization_header_widget_area() { dynamic_sidebar( ‘header1’ ); dynamic_sidebar( ‘header2’ ); }

    August 6, 2019 at 8:48 am #1125004
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    #text-5 {
    position: absolute;
    left: 0;
}
#text-6 {
    position: absolute;
    right: 0;
}

    Best regards,
    Rikard

    August 6, 2019 at 5:10 pm #1125178
    hostworks

    ok, thanks. now how do I push them closer to the center logo, like the sample?

    August 6, 2019 at 5:39 pm #1125181
    hostworks

    Ok, I added the following, which fixed the desktop, but it messes up the mobile, see below

    #text-5 {
    position: absolute;
    margin-left: 22em !important;
    left: 0;
    }
    #text-6 {
    position: absolute;
    margin-right: 22em !important;
    right: 0;
    }

    August 7, 2019 at 6:09 am #1125386
    Rikard

    Hi,

    You can add specific CSS for mobile devices by using media queries:

    @media only screen and (max-width: 767px) {
#text-5 {
position: absolute;
margin-left: 22em !important;
left: 0;
}
#text-6 {
position: absolute;
margin-right: 22em !important;
right: 0;
}
}

    Best regards,
    Rikard

    August 7, 2019 at 6:53 am #1125397
    hostworks

    ok. doesn’t make any difference. I may just want those two widgets to go away on mobile.

    August 7, 2019 at 2:09 pm #1125547
    Rikard

    Hi,

    Ok, add this instead then to hide them on mobile devices:

    @media only screen and (max-width: 767px) {
#text-5, #text-6 {
display:none;
}
}

    Best regards,
    Rikard

    August 7, 2019 at 4:25 pm #1125577
    hostworks

    Fantastic, thanks.

    August 7, 2019 at 6:12 pm #1125628
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘trying to add two widget ares’ is closed to new replies.