Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 29, 2021 at 5:10 am #1330775
    navindesigns

    Site – http://alexandere68.sg-host.com/
    Mockup – https://ibb.co/KyktXyw

    I am trying to add a widget area to the right side of my header as per my mockup above. The widget will contain the telephone number and email sections seen on my mockup.

    I followed the documentation here – https://kriesi.at/documentation/enfold/header/ but on my dev site you can see that the widget is showing on the top left of my page instead. It is currently labelled “test”. I just need it to be shifted to the far right of the header instead

    Please help

    November 29, 2021 at 7:53 am #1330808
    Ismael

    Hey navindesigns,

    Thank you for the inquiry.

    You can use this css code to adjust the position of the widget.

    #top #header #header_main .widget {
    position: absolute;
    right: 100px;
    top: 10px;
}

    If you are going to add another widget, you can use the widget ID to target or adjust the style of any specific widget.

    Best regards,
    Ismael

    December 9, 2021 at 5:04 am #1332046
    navindesigns

    Thanks. That works but is there any way I can get it flush aligned with the social icons above and “Make An Appointment” below? On large monitors, it will extending out too far on the right

    Screenshot. – https://ibb.co/nnGx3bp

    December 9, 2021 at 2:47 pm #1332146
    Ismael

    Hi,

    Thank you for the update.

    Looks like you already adjusted the widget position with this css code.

    #top #header #header_main .widget {
    position: absolute;
    right: 100px;
    top: -20px;
}

    Let us know if you need more help with this.

    Best regards,
    Ismael

    December 9, 2021 at 3:08 pm #1332152
    navindesigns

    yes but it is not the correction solution

    open thr site in a wide browser amd you will see it is not aligning

    msybe i need to tweak that css?

    December 10, 2021 at 11:36 am #1332274
    Ismael

    Hi,

    In the functions.php file, try to replace the ava_main_header hook with ava_after_main_menu to render the widgets after the main menu, then adjust the css code a bit to align them with the social icons..

    #top #header #header_main .widget {
    position: absolute;
    right: 0;
    top: 0;
}

    Thank you for your patience.

    Best regards,
    Ismael

    December 12, 2021 at 3:13 am #1332460
    navindesigns

    That pushed it below the main menu, please take a look at the site now

    Home

    December 13, 2021 at 3:23 am #1332516
    navindesigns

    I had to revert back to the way it was but here is a screenshot of where it was pushed below the main menu after your latest code suggestion

    Screen-Shot-2021-12-12-at-8-22-18-PM

    December 13, 2021 at 4:18 pm #1332601
    Yigit

    Hi,

    Please try adding following code to bottom of Quick CSS field

    .html_header_top.html_bottom_nav_header #header_main {
  max-width: 1310px;
  margin: auto;
}
#top #header #header_main .widget {
  right: 0;
}
#menu-item-100 a {
  padding-right: 0;
}

    Best regards,
    Yigit

    December 14, 2021 at 5:09 am #1332693
    navindesigns

    That works PERFECT!
    thank you so much!

    December 14, 2021 at 1:44 pm #1332751
    Yigit

    Hi,

    You are welcome! Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Add Widget Area to the right side of header’ is closed to new replies.