Merge Header

Is there a coding way to specify that at a certain viewpoint, the sticky navbar style (that I described in the last message I sent) is disabled so on smaller viewpoints this won't even pose an issue with the length of the titles since the whole sticky navbar feature will be disabled.

Sorry for the late response, I've been trying to find a website that has a similar design as what I'd like: https://ibb.co/xjNfmtC.

Thanks Elvin!

Added Note:

I changed the mobile menu breakpoint to 10000px as David suggested earlier in this thread and as a result I can see the hamburger menu again: https://ibb.co/zmBjD64 . When I click on it, the slide out menu on the left side no longer is visible: https://ibb.co/RvpjGfq

1. It will be easier to just hide the custom title in the Sticky Nav - then it would be to disable the sticky nav as we have changed the mobile breakpoint it gets a little messy.

To hide the custom title - in Elvins reply:

https://generatepress.com/forums/topic/merge-header/#post-1773507

On Line 5:
<?php $title = get_the_title(); echo '<div class="custom-page-title"><h2 class="page-title">'.$title.'</h2></div>'; ?>

change it to:

<?php $title = get_the_title(); echo '<div class="custom-page-title hide-on-tablet hide-on-mobile"><h2 class="page-title">'.$title.'</h2></div>'; ?>

The change is the addition of these two hide-on classes: hide-on-tablet hide-on-mobile

2. For the missing nav - in Customizer > Layout > Off Canvas, make sure its set to ON and not just for Mobile.

Hi David,

I removedd the php snippet Elvin gave me and added the new php snippet you gave me to hide it on tablet and desktop: https://ibb.co/1zByvmN.
Changed the off canvas menu from desktop only to on and the slide out menu appears now, thanks!

On the post page, I still don't see the post title appear in the sticky nav when you scroll down the screen: https://ibb.co/cbDhy8Z

Thanks!

Can you link me to a post where i 'should' see the sticky post title ?

Here are a few exaxmple places:

https://alwaysang.com/?p=3143&preview=true
https://alwaysang.com/?p=3128&preview=true
https://alwaysang.com/?p=3163&preview=true

The style i am going for is similar to this: https://ibb.co/njQdSXW , where the hamburger menu and site title are on the left side and then the post title in the center and the search bar on the right side--and have this for only post pages.

Also, how do i update to the latest version of GP as I have Version 2.02 and don't have access to the creating dynamic data without erasing the way the site looks now.

thanks!

I would need a Published post link as preview links only work if you're logged in.
Either that or you can provide us with a admin user login in the Private Information box

I included the admin user info in the private box

Doh ... we're using the Mobile header.
So i changed to hook for the: Post title on Navbar for post pages to generate_inside_mobile_header - so it now displays. :)

Now add this CSS:

#mobile-header.is_stuck .navigation-branding {
    order: -1;
    margin-right: 10px;
}
.custom-page-title {
    margin-right: auto;
}
.custom-page-title h2 {
    margin-bottom: 0;
}
#mobile-header:not(.is_stuck) .custom-page-title {
    display: none;
}

awesome thanks David, it now shows! how do I center the title, as now the title is off centered: https://ibb.co/Sv1trhP

Can I "float:left" the hamburger menu so when looking at the screen it is to the left the site title "always ang" (but keep the search icon to the right)

Thank you!!

So couple of things:

1. In the above CSS change this:

.custom-page-title {
    margin-right: auto;
}

to:

.custom-page-title {
    margin-left: auto;
    margin-right: auto;
}

2. To reposition the toggle and center the post title - add this CSS:

#mobile-header.has-branding .menu-toggle, .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: -5;
}

#mobile-header .mobile-bar-items {
    margin-left: auto;
}
#mobile-header .navigation-branding .main-title a {
    margin-left: 0;
}

Awesome, it all worked out https://ibb.co/Wnmkyc4

thanks david!

if i want to adjust how far right the search bar is i just have to add just the margin?

In the CSS above:

#mobile-header .mobile-bar-items {
    margin-left: auto;
}

you can include a margin-right property eg.

#mobile-header .mobile-bar-items {
    margin-left: auto;
    margin-right: 40px;
}

Awesome!

Thanks a bunch to you and Elvin for helping sort out the navbar!

Glad we could be of help!