Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
  • #1353197

    Hey folks.

    A client asked us to add a widget area above their header area… and we’ve followed the directions here, to the letter:

    As soon as we add the CSS provided, the logo shrinks, and the header stops following the “Let logo and menu position adapt to browser window” setting.

    Logo crunched and header narrowed

    Then, when we add a widget to the header widget area, it gets inserted between the logo and the menu, which are now centered and on top of each other – and is not in the right place:

    Banner text example

    This is what the header looks like without the CSS code… they just want this, with a widget area above it.


    We’re following the instructions to the letter, have searched the forum for a solution, and can’t figure this out.
    Any ideas?


    One first question – you do not use or need the header-meta area


    The “top bar”?



    there are a lot of hooks to use – if you do not use the top bar – we can use that hook for it: avia_meta_header
    there are snippets to activate the top-bar without using the elements ( top navigation, social icons , phone number). Advantage of that hook : it is part of header – you can decide that this area scrolls even if the header main is on sticky mode.

    Anyway if you use a widget-area there – you had to adjust the padding-top of main


    I’m not sure how this applies to our current situation. We just want to have the header widget area show up in the right place, and not affect the appearance of the menu/logo.


    Link removed – see advice later on.
    it is just a quick and dirty setting – because all responsive settings aren’t done.

    if you go and have a look into enfold folder content – there are a lot of do_action rules –
    wp_body_open, ava_after_body_opening_tag, avia_meta_header, ava_main_header etc.
    some of them are used – if f.e. wpml is installed.

    • This reply was modified 1 year ago by Guenni007.


    Where are these snippets?


    for header meta you can use:

    add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
    add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
    function avf_header_setting_filter_mod($header) {
      $header['header_topbar'] = 'header_topbar_active';
      return $header;
    add_action( 'avia_meta_header', 'enfold_customization_header2_widget_area' );
    function enfold_customization_header2_widget_area() {
      dynamic_sidebar( 'header2' );

    Then you had to create the custom widget area on widgets named : header2
    the setting that the header meta is scrolling you can find on enfold child – header – header behavior: Unstick topbar


    I’ll try that this evening!

    Thank you SO much!



    but i think that this will only work if we can find a solution for that padding-top calculation for main.
    or – using a different place in the DOM

    I’m trying a few other methods right now. …


    i guess – best would be with your page the standard widget area: ava_main_header
    because you got a non sticky header.

    add_action( 'ava_main_header', 'header_widget_area' );
    function header_widget_area() {
      dynamic_sidebar( 'header2' );


    Thanks for helping out @guenni007 :-)

    Best regards,


    OK, so I’ve done some dancing with this- it didn’t work. What we wanted to do was add two buttons above the logo/menu area.

    I came upon this, which we can totally work with:


    The CSS on that page is wrong.

    The title says:

    Header Layout: Logo left, Widgets right, menu below

    But the CSS clearly says


    Logo left, Widget center, widget right, menu above


    Anyone have the proper CSS for Logo left, Widgets right, menu below?




    It would be nice if you could first agree with yourself on what layout you want now.
    On first request it is : “A client asked us to add a widget area above their header area… and we’ve followed the directions here, to the letter:”

    My solution from :
    see here ( for today – because i do not need it there):

    Then – did you read that links on docu carefully ?
    in particular, have you ever clicked and read through point 4?
    It is not achievable with only css means. You have to generate a widget area first.

    Now you like to have the widget besides the logo? …
    Maybe just make a little drawing of how it should look.


    Yes… because I couldn’t get the solution you sent to work properly, which is why I said:

    “OK, so I’ve done some dancing with this- it didn’t work. What we wanted to do was add two buttons above the logo/menu area.

    I came upon this, which we can totally work with:”

    I thought I was making that clear… sorry.

    We’ve accepted this as an alternative, but need the proper CSS.


    But you see on my link that it worked this way i described !
    One widget area above header ! ( in this case with a button-row inside )


    I’ll give it another shot!!!



    Thank you, Guenni. Very much.


    but use this snippet :

    on that snippet you see that the header-widget area is : header2

    this is up to you – how you call it: it only had to be the same name here on widgets options.

    click then : Add widget area button.

    then you can insert f.e. a html widget to it. These html widgets can be filled with enfold alb shortcodes.

    Do you know how to activate the enfold debug mode? : Link


    if you open a new page and style it with enfold advanced layout editor – you can pull a single button-row alb element into the layout.
    ( Nothing else – no columns etc. pp – except if you like to have it in your widget too )
    if you have activated the debug mode under the layout input area – there is the shortcode area.
    this shortcode represents the button-row.
    So style it til you are satisfied with all colors and links etc.

    copy paste it then – and put that shortcodes into the html widget of header2


    Yep! I totally got it. You rock.

    Thanks again!



    not for that !

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