Adding a PHP shortcode at bottom right of nav header

Hi there,

you can use a Hook Element, and select the after_header_content hook

https://docs.generatepress.com/article/hooks-element-overview/

I've added this hook and works fine on desktop but disappears on mobile when menu becomes hamburger...
Any way to keep alive on mobiles?

Options:

1. Disable the Mobile Header

or

2. create another Hook and with the same code and select the inside_mobile_header hook

The first option is too messy but the second, currently active, doesn't seem to work.

Add this CSS:

.main-navigation #flags ul {
    display: block;
}

Although those icons may be a little small for mobile devices.
You may want to add the Shortcode to the Off Canvas Widget area instead to make them more accessible.

That works now and it's not bad.
I prefer having them here instead of the Off Canvas as it's simpler to use.

But the placement is a bit odd at top left and don't well understand why the logo centers as this was already the case before when I increased it size.

I tried to better align those elements for small screens but failed miserably...

How would I align them all that way?

Logo: top left
Hamburger: top right
Flags: bottom right

Looks like you made some changes to desktop as well?

If you can disable the autoptimize, and look for any CSS thats affecting the navigation layout in Customizer > Additional CSS then we can look at whats required for desktop and mobile.

No, I don't think I made any other changes in there, except those related to the slider as per
https://generatepress.com/forums/topic/catalyst-adding-sliding-slogans-at-homepage-header/#post-1228357

and the separation of the containers as per
https://generatepress.com/forums/topic/containers-for-posts-pages-and-widgets/

and added this for the logo height according to another thread:

/* mobile logo height */
.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 120px;
	margin-top: 40px;
}

I don't run Autoptimize at this site, so I don't well understand to what you are referring to exactly. Maybe Asset Cleanup? I just cleared all caches there.

I see I also commented this out... but forgot what for:

/*
body.single .site.grid-container {
    max-width: 1000px;
} 
*/

Can you disable whatever cache / optimization plugins you're using ? Then i can see where the CSS affecting the positioning is coming from.

Also in your HTML can you remove: align=right from the mobile hook.

There was only Asset Cleanup and Flying Pages activated and I just de-activated them both.
Fastest Cache was active but not enabled but I just also de-activated it.

There is nothing else of this kind at this temporary URL.

Thanks

The HTML for your Flags in the Mobile Header can you change it to:

<div class="mobile-translate"><?php echo do_shortcode('[google-translator]'); ?> </div>

Then i can provide the CSS to position it.

Thanks David - done.

Try this CSS:

.mobile-translate {
    order: 4;
    width: auto;
    flex: 1 0 calc(100% - 20px);
    margin-right: 20px;
}
.main-navigation #flags {
    width: 100%;
}
.main-navigation #flags ul {
    float: right !important;
}

In your Header Element you need to add some more top padding for mobile - this will stop the hero text from hitting the navigation elements.

That's really great and works just fine, many thanks David and sorry if I asked too much.
I really appreciate your patience and knowledge.

I'll play around a bit with those settings and I'll be ready soon to move back to the original URL and replace the old site.

I have only 2 interrogations left that are really secondary.
I understand that this might be out of the scope of your support, in that case just ignore them, but I'm really unable to find the solution after testing dozens of variants...

1. In order to get post categories on top of pages, right before the post's date, I've added this snippets that you suggested and that works just fine:

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    if ( is_single() ) {
		$items = array(
			'categories', 
			   'date',
        );
    } return $items;
} );

The only thing is that it is not clear what "internet" means right in front of a date and I would like to add a plain text prefix, like "category: Internet" and then "publication date: xxx".
I really cannot find a way for adding plain text in there and, believe me, I searched...

2. The only layout trick I miss from the previous site (you still have the link inside the slider) is this orange line (class="line") that shows below widget titles, at homepage and sidebar:
https://cloudup.com/cPJdZWxmjuy

Is something similar possible to implement here with CSS or is it more complex than that?

Thanks again.