-
Posts
-
I am using this header layout: http://imgur.com/8vvWdnY
How could I create a widget area to the section marked “here” in the screenshot?
Is there a guide? Obviously it would need to ‘stack’ (appear below logo) when viewed in responsive design.
Hey xlguy!
Please see here, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/.
Cheers!
ElliottHi @Elliott thanks for doing that blog posting, but it’s not really the same as my screenshot. Your tutorial creates a widget area after ‘ava_after_main_menu’ whereas I guess it needs to be after the logo? Maybe your guide is for a different header style?
Hi!
Using custom CSS code posted in Elliott’s tutorial you can place your widget to section you showed in your screenshot. We can gladly provide you additional CSS code in case you need but please firstly apply the changes Elliott suggested
Cheers!
YigitHi @Yigit – I did try, it puts it right after the menu based on the header I’m using. The only way I could see getting it to my desired location would be to use a negative margin, as it needs to appear *before* the menu, not after – as the current hook location says.
It’s a development site, local only I’m afraid. But if you look at the code that he gives, the widget is being applied *after* the menu and his CSS wouldn’t make it appear above the menu. Is there a hook location before the menu?
Hey!
:) If you take a look at this topic – https://kriesi.at/support/topic/widget-in-topbar/
You can see that it is even possible to place custom content to header meta section using the code posted here – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ + adjustments.
Please post the link to your website when you launch it so we can help you place the content wherever you would like to display it :)Best regards,
YigitLike I said, the site isn’t available – it’s a local install.
The problem with that solution is it relies on a negative margin which isn’t pretty.
I think there must be a hook before _after_menu?
Hey!
There is not such hook. As i said, please post the link to your website when you launch it and we will help you place the content in desired area.
Cheers!
YigitHi @Yigit @Elliott – I find it strange you say that?
add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}That would be a better location.
My guess is that your solution would have used -negative margin to bring it back above the menu? That’s not a nice solution.
What about my solution above? That hook location?
Hey!
You can try the ava_main_header but your still going to have to use CSS to move it to the exact spot your wanting. It’s hard for us to know the exact CSS without seeing it in action.
Send us a link when you go live and we’ll be able to help you out.
Cheers!
ElliottHi xlguy, Elliott, Yigit, and any forum readers,
Thanks for this thread—I too had an issue with the source order for the widget, so I experimented with the hooks but ended up reverting to Elliott’s suggestion.
In visual/layout terms, I found the hook provided by Elliot is the only one that will enable the new widget to sit inside an Enfold div.container, important for positioning (left and right) purposes in many layouts (as at v3.1.3 with current choice of hooks).
If you use a different hook such as the ava_main_header your positioning will be relative to the full viewport, since the widget won’t be nested inside a div.container (it will instead be a sibling of the main header first level container). This will usually not suit boxed layouts, nor layouts where your page is constrained to a specific maximum width.
I also experimented by adding an html div with class of container in the widget CSS, but I quickly realised that the website content-managers are likely to accidentally remove it (or duplicate it) when editing widget content.
As the moderator’s said, regardless of which hook you use, CSS is required to position the element.
So I too reverted to using the ava_after_main_menu hook.
I hope that helps anyone else weighing up the benefits or differences of the hook locations.
While I was able to create the visual effect I needed, perhaps some more hooks can be added to future releases such that the elements within them make better semantic sense in the code hierarchy.
cheers
Darryl
- You must be logged in to reply to this topic.