Move header into tm-primary

I want to move the entire header into tm-primary, and am thinking I should be doing something like

beans_remove_markup( 'markup_id' );

for markup_id's of beans_header, beans_fixed_wrap_header (or maybe brackets around the underscore-header), beans_primary_menu, beans_menu_navbar (same thing with maybe brackets around underscore-navbar)

And then replace all four of them (with all their associated markup) right after the beginning of beans_primary, which is the markup_id for the tm-primary div.

add_action( 'beans_primary_prepend_markup', 'add_header' );
function add_header() {
  echo '<!-- added html header stuff -->';
}

Would that be correct? That I need to remove all four and then add them back in? Or do I need only to remove the "outer" part, ie beans_header, and then add them all back inside the add_header?

Or, maybe you know a simpler approach ???

If I may, I had a mad week figuring out that there's more than just moving content and structure around in beans, there's also the component level. Or in beans, fragments.

Keep in mind, I ran into issues with schema validation when using beans_remove_markup for elements which either contained or connected to schema.org markup. beans_remove_action bypassed the issue, as long as I made sure that I did not put the removed element within the schema declaration of the element I wanted it to display in So {$markup_id}_before_markup.

You can use {$markup_id}_prepend_markup, but while on (most) structured data testing tools it will pass (though not without some itemprops ending up elsewhere - or not read), it will not validate for googlebot or bingbot.

beans_header is one of those fragments which holds structured data markup, so it is something to keep in mind.

It seems beans lets you move around just about everything including the kitchen sink, but you have to be careful with what type of action, element and target, where it comes to moving things around.

Thierry pointed out a different approach in a topic where I was banging my head against something similar: modifying action hooks, for example:

beans_modify_action_hook( 'beans_post_image', 'beans_post_title_before_markup' );

Took me a bit to see the line of thinking, but it works. It's elegant, produces no issues whatsoever. As Thierry explained the above example, In the line above, it says "please modify what ever hook the post image is attached to and instead attach it to the hook before the title". So if you want to move things that are fragments around, hook it up.

So in other words:

First, use before instead of prepend in order to avoid googlebot problems.

And second, instead of looking in the code to find the markup_id to add something "just after" or "inside this", find the next markup_id and add something "just before".

Eg, for my purposes here,

beans_modify_action_hook( 'beans_header', 'beans_content_before_markup' );

Trying this now . . . And it did not work. Bummer.

If I may, why are you trying to put the header into beans_primary? Since beans_content is a fragment, just like beans_header, I'd think to keep beans_header seperate from it, make it part of beans_main_grid, inserting it before beans_content?

Excellent question. Short answer is that beans_main_grid goes all the way across, yes?

Basically, I want the header to be the same width as the article content. I am trying to reproduce something similar to the following design: http://stagepage.info/ And here is my current effort: http://whatsmymo.com/ The problem is that the current effort is not media-friendly (for a variety of reasons; I have probably made some mistakes in the style.less file defining absolute widths). However, one problem is that the elephant at top right is inside the header, not at the top of the sidebar. Of course, I can remove the elephant at some breakpoint where its change in position becomes awkward. However, I think having a left column of header and article content, a right column of sidebar, and a footer across the bottom of both columns would be the ideal layout. Especially since I have now read up on the uk-grid width specifications.

I welcome your thoughts.

As the current effort stands now, I put the repeating elephant into the background of tm-site (at top right and repeat-y).

That's why it looks like its own column. The elephant image includes the grey stripe on its left. The sidebar has a background of that same yellow, which is why/how the elephant shows up both above and below the sidebar search and categories.

Well, you can always replace the relevant classes for various elements/sections. The typical header for example is full-width, while the content area adheres to a specific grid. But it is possible to tell the header to behave like the content area, visually.

For example, adding a uk-container class to a block element to give it a max-width. Result: it wraps the main content of the website. Or create a fixed_wrap for a section, apply layout to beans_header. Keep in mind, I'm no developer - unfortunately I don't have a ready example handy, but in testing I've screwed up enough to at various points end up with what you're trying to achieve.

Perhaps Thierry has a snippet?

I do hope Thierry has a snippet or thoughts. The problem with having the top-right elephant inside the header and then putting a 5px wide border either on the left side of the sidebar or the right side of the article content area is that the grey border of the elephant and the grey border of the sidebar-or-article do not match up at different screen widths. That is, when I put the cursor at right edge of the browser and drag it smaller, they get out of alignment, and that's true before it reaches the iPad breakpoint. Of course, I was using percentages. This was before I saw the global variables for widths of uk-stuff. That might pose a solution.

Thierry? We await your wisdom and expertise !! 🙂

Hey guys,

There then header is a fragement that can be moved around. To move it in the content, you can use the following:

beans_modify_action_hook( 'beans_header_partial_template', 'beans_content_prepend_markup' );

Since it is moved in the content, I guess you don't really need the fixed wrapping div anymore so you can remove it as such:

beans_remove_markup( 'beans_fixed_wrap[_header]' );

Happy coding,