Merge Header

Hi there,

1. The simplest method would be to increase the Mobile Menu Breakpoint in Customizer > Layout > Primary Navigation to a really high value eg. 10000px - which you can type in manually. This will then force the mobile menu to be displayed.

2. The we need to hook in the post title.
Which we can do using a Block Element - first question are you using GenerateBlocks ?

Right Now, the mobile break point is at 768px--at this setting when i click on the hamburger menu i have my slide out menu appear like this: https://ibb.co/kGM3Xmk.

When I set it from 768px to 10000px, when i click on the hamburger, the slide out menu no longer appears but this happens: https://ibb.co/VtcsJcg.

Is 768px high enough of a value to keep or do I need to make it higher---I just would like to keep the slide out menu!
These are the current settings of my primary nav tab under the customizer: https://ibb.co/M7ynJDJ

I do use the GenerateBlocks though I'm not used to using the elements.

Thanks David!

When I set it from 768px to 10000px, when i click on the hamburger, the slide out menu no longer appears but this happens: https://ibb.co/VtcsJcg.

Strange. Can you let us have access to the site to inspect? The site is currently in maintenance mode.

Let us know.

Is 768px high enough of a value to keep or do I need to make it higher—I just would like to keep the slide out menu!
These are the current settings of my primary nav tab under the customizer: https://ibb.co/M7ynJDJ

that's low if you want the hamburger icon to show up even on desktop viewports. That's why David recommended 10000px. So the hamburger shows up regardless of viewport size.

for #2)

We'll need to inspect how "Always, Ang" part to understand better and identify which is the best way to go about it.

Thanks Elvin, i added the site and turnedd off maintenance mode!

The "i'm 5'2.." title that is in the sticky navigation, is a menu item for a page that I just renamed to see how it would look but i can remove it if that will help

Ah I see now. thanks. :)

For that, you'll have to use this filter: generate_site_title_output
https://github.com/tomusborne/generatepress/blob/b60b853630da6d9015722da903e53c8064148b0a/inc/structure/header.php#L202

We'll have to do an STR replace to insert your title.

Here's an example PHP snippet:

add_filter('generate_site_title_output',function(){
    $string_mod = get_bloginfo( 'name' );
    $target_text = 'Always, ';
    $title = get_the_title();
    $replacement = 'Always, '.$title.' ';

	return sprintf(
				'<%1$s class="main-title"%4$s>
					<a href="%2$s" rel="home">
						%3$s
					</a>
				</%1$s>',
				( is_front_page() && is_home() ) ? 'h1' : 'p',
				esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
				str_ireplace("$target_text", $replacement, $string_mod),
				'microdata' === generate_get_schema_type() ? ' itemprop="headline"' : ''
			);
});

Apologies Elvin as i'm a bit confused as to what i have to do.

i have to add all of that php code?

Where do I add that generate_site_title_output filter? I clicked don the git hub link, do I have to add all of that code--if so where do i add it? What is an STR?

thank you, will add that php snippet now!

Where do I add that generate_site_title_output filter? I clicked don the git hub link, do I have to add all of that code–if so where do i add it? What is an STR?

You only need to add the snippet I've provided. The code link is only for reference. :)

Here's how to add PHP snippets to your site - https://docs.generatepress.com/article/adding-php/

So I added the php snippet,

on the homepage now, the hamburger menu is no longer visible and on the sticky navigation and there is "homepage" and "blog" in between the site title "Always, Ang" : https://ibb.co/xM2TymH

on the post page example, the sticky nav looks like this: https://ibb.co/drWsc3j
the hamburger menu isn't visible and the post title, is in between the site title "Always, Ang"

Thanks!

Ah my bad. I misunderstood what you wanted to do with it.

Do you want 'Always, Ang" followed by the title?

Also, I assume you only want this applied on post pages?

If so, try this PHP snippet:

add_filter('generate_site_title_output',function(){
    if( is_single() ){
    $string_mod = get_bloginfo( 'name' );
    $title = get_the_title();
    $replacement = $string_mod.' '.$title;

        return sprintf(
                    '<%1$s class="main-title"%4$s>
                        <a href="%2$s" rel="home">
                            %3$s
                        </a>
                    </%1$s>',
                    ( is_front_page() && is_home() ) ? 'h1' : 'p',
                    esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
                    $replacement,
                    'microdata' === generate_get_schema_type() ? ' itemprop="headline"' : ''
                );
    }
});

As for the hamburger:

The script involved with it doesn't seem to be loading.

Can you try disabling all plugins except GP Premium? To check if something's messing it up.

Ah yes, would like it to be "Always, Ang" on the left and then the post title in the center for post pages. I replaced the first example php snipped you gave with the second one above, https://ibb.co/qWyzHvb. When I saved the php file and refreshed my homepage, only the search icon was visible: https://ibb.co/SmSy7Wr

Disabled all plugins except for GP--just have GP Premium and GenerateBlocks activated

Thanks!

Ah yes, would like it to be “Always, Ang” on the left and then the post title in the center for post pages. I replaced the first example php snipped you gave with the second one above, https://ibb.co/qWyzHvb. When I saved the php file and refreshed my homepage, only the search icon was visible: https://ibb.co/SmSy7Wr

If that's the case then we'll have to remove the filter. I thought you wanted to connect the site title w/ the page title. My bad.

Instead of using the filter, let's insert the page title through a hook instead so it has its own element wrapper we can style with CSS.

Try this:

1.) Create a Hook element
2.) Set the hook to "generate_inside_navigation"
3.) Set the display rule location to posts or pages you want this applied on.
4.) Check "Execute PHP"
5.) Add this PHP snippet.
<?php $title = get_the_title(); echo '<div class="custom-page-title"><h2 class="page-title">'.$title.'</h2></div>'; ?>
6.) Save the Hook element.

What we've done is basically to add the page title as a part of the navigation bar.

After applying this, let us know so we can inspect the page for the CSS writeup to style it to the middle of the navigation bar.

Ah thank you! deleted the longer php snippet and Saved the hook element: https://ibb.co/vHTTFRC
-- I added the php snippet in the code box at the hook (in the photo link above) but was i supposed to add it to the theme's php file?

this is what the post page now looks like: https://ibb.co/ScX4h87

from left to right on the sticky navbar, I'm looking for it to be the hamburger icon and then the site title "always, ang" and then on the right side have the search icon and the lightweight social media icons. Then once the user scrolls far enough down the post to where the post title on the page is no longer visible, I'd like for the post title to then appear on the sticky navbar in the center so it's: hamburger menu + site title + post title + search icon + lightweight social media icons.

Apologies if i made it confusing! thanks!

from left to right on the sticky navbar, I’m looking for it to be the hamburger icon and then the site title “always, ang” and then on the right side have the search icon and the lightweight social media icons. Then once the user scrolls far enough down the post to where the post title on the page is no longer visible, I’d like for the post title to then appear on the sticky navbar in the center so it’s: hamburger menu + site title + post title + search icon + lightweight social media icons.

Yeah that's fine, we can sort it out with CSS. (There's going to be an issue with longer titles thought. It'll be in 2 lines to fit on smaller viewports.) TBH, I'd recommend not doing this as title lengths vary. It will look weird. We're basically trying to fit an adult elephant on a mini cooper.

Can you link us to the right page, I'm not sure I'm seeing the correct one.