Special navigation layout

Hi Adrian,

This is possible, however, you would need to hook the logo or the Blog Post title to the menu_bar_items Hook as such: https://share.getcloudapp.com/eDul08Dd

Then, you’ll just need to manually fix the CSS and set the order of the elements.

See this for reference: https://share.getcloudapp.com/P8u6DkPB

Hope this helps! Feel free to reach out if you’ll need further assistance with regards to this! :)

Hi Fernando,

Thanks a lot. I understood your explanation, but I think I still can't display it as I wish.

Let's forget about the blog post title for a moment and focus on the main navigation first. What would be the easiest way to get a centered logo, hamburger menu on the left, and search on the right? Also, what about the navigation alignment, should I put it left center or right? Or should I choose navigation as header?

Thanks!

Hi there,

try adding this CSS for the static navigation:

.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}
#site-navigation,
.menu-bar-items {
    flex: 1;
}
#site-navigation .menu-bar-item.search-item {
    margin-right: unset !important;
    margin-left: auto;
}
.navigation-search.nav-search-active {
    top: 100%;
}

If that works ill take a look at the stick nav requirements.

Perfect David!

I see that inside-header grid-container class have a fixed max-width: 1200px. Could be removed so that the hamburger menu floats against the left margin and search against the right?

Thanks

Forget it, I answer to myself -> "Inner Header Width"

Glad to hear that!!

Oops - sticky nav.
Thats a trickier one. As the Title will be a variable length, so we don't want to abs position it as it could overlap over elements.
Try changing the Hook for the Title to the menu_bar_items hook then we can position it between the menu and the search icon.

Sorry David, one more thing before we jump to the sticky. I think it would be necessary to add a CSS media query so that it looks good on mobile too, because when I start to shrink the window, the search icon moves to the left of the logo.

As for the sticky, I have already changed the hook as you indicated and assigned it the following class: sticky-entry-title

Thanks!

Add this CSS to correct the Mobile Navigation:

@media (max-width: 768px) {
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        margin-right: unset;
        flex: 1;
    }
    .mobile-menu-control-wrapper .menu-bar-items {
        margin-left: auto;
    }
    .mobile-menu-control-wrapper .menu-toggle,
    .mobile-menu-control-wrapper .menu-bar-items {
        flex-grow: 0;
    }
}

And this for the Sticky nav:

.main-navigation .menu-bar-item {
    position: relative;
    order: -1;
}
.sticky-entry-title {
    flex: 1;
    text-align: center;
}

Hi David, sorry to bother you again with this.

Main Navigation:
Desktop: Perfect for both Homepage and Blog posts.
Mobile: The media query doesn't seem to have had an effect - the search icon hasn't moved to the right yet -

Sticky Navigation:
The sticky works fine, although on the homepage that doesn't include the blogpost title, the search icon moves to the left right next to the hamburger menu.

Thank you

I updated the CSS above to correct the mobile condition:

https://generatepress.com/forums/topic/special-navigation-layout/#post-2108448

For the sticky nav - simplest fix for that would be to hook in an empty sticky-entry-title element on the home page.

Brilliant David.

I just adjusted the padding a bit on mobile to move the hamburger menu a bit to the left and the search to the right, since they were too close to the logo:

@media (max-width: 768px){
.inside-header {
    padding-right: 2px;
    padding-left: 2px;
}
	}

And as for the sticky navigation, the empty hook hack worked perfectly.

I appreciate your help.
Outstanding support, as always.

Awesome glad to hear that!