[Resolved] Custom Menu Layout

[Fredrik]

Hello,

I’m not sure where to look for documentation regarding this, so I feel I should ask.

Trying to create a basic design sticky menu after abandoning mega menu plugins, the layout of the menu should look something like this: https://prnt.sc/uadygl

Basically two issues to start with.

1. The whole area (as specified in the image) header/nav should be sticky. E.g. logo should not be left behind.

2. The logo/site title should center align over the primary nav.

I feel like this is something more doable with GP after moving away from the mega menu. So any suggestion on how to best structure a menu like this would be helpful. Thx!

[Tom]

Hi there,

Definitely going to take a little custom code to get there, I think.

Can you add your site title/logo to the page so we can play with the CSS a little?

[Fredrik]

Hello Tom,

Sure thing! I added the site title.

Thx!

[Tom]

Can you also re-add the secondary navigation as you had it before? We’ll need to have both active in this case so we can have the menu items up above inline with your title, and then the menu items below it as well.

[Fredrik]

Hello Tom,

I added the secondary navigation also 🙂

I realized you could add the logo above the primary navigation, like so.

.navigation-branding {
		display: block;
		width: 100%;	
	}
}

But that’s only half a solution.

[Fredrik]

So I added,

	#site-navigation + .secondary-navigation {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		right: 0;
		top: 60px;
	}
}

I figured you were going in this direction anyway.

Now to align the “navigation search”, “cart”, “off-canvas menu” “main title” in the primary navigation. Thx.

[Tom]

Getting closer!

Now we can center your navigation branding:

.navigation-branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

And re-order the items:

#menu-poster-clan-menu {
    display: flex;
}

.slideout-toggle {
    order: 1;
}

.search-item {
    order: 2;
    margin-right: auto;
}

.wc-menu-item {
    order: 3;
}

[Fredrik]

Great stuff! Thank you!

One interesting thing happened on mobile:
https://prnt.sc/ub4uyi

Duplicates of the,

.slideout-toggle

.search-item

.wc-menu-item

[Tom]

Try adding this as well:

#site-navigation .mobile-bar-items, 
#site-navigation .menu-toggle {
    display: none;
}

[Fredrik]

Ah, I see. Fixed that.

Another thing I didn’t notice at first. The hamburger menu end up in the middle of the search bar hiding the text you type in. https://prnt.sc/ub571j

[Tom]

That’s a tough one – what would you like the search icon to do when toggled? Move to the right? Have the search area drop down below the header?

[Fredrik]

I was thinking of a slide-out or pop down type of thingy like this:

https://prnt.sc/ubnrz7

If that’s not doable, add a hook in the nav and have something like this if possible:

https://prnt.sc/ubo6sg

Either way, it has to be something user-friendly that works.

Also, every tried having post/products show up as suggestions dynamically while entering a search?
Looking to add that as a future feature. To give you an idea try searching this site for instance: https://www.uniqlo.com/us/en/home/

Thx 🙂

[Fredrik]

I realized a hook would probably not be a great experience on mobile.

Just a simple overlay would be the best solution in this case. https://drive.google.com/file/d/1_YWwfcrZGeXrxFkRacyDfMm1pgL0l3xB/view

[Elvin]

Hi,

Were you able to achieve the preferred UI?

If I may add more, you can add this CSS so the close button doesn’t block the search input area.

@media (max-width:768px){
.main-navigation li.close-search {
    position: absolute !important;
    right: 0;
}
}

here’s a demo of how it will look like.
https://share.getcloudapp.com/d5uEXLXA

This will only apply on mobile. If you want it to stay at the left side, you can just remove “right:0;”.

Also, every tried having post/products show up as suggestions dynamically while entering a search?
Looking to add that as a future feature. To give you an idea try searching this site for instance: https://www.uniqlo.com/us/en/home/

I believe you can already do this by installing some sort of an AJAX search plugin.
You might wanna look more into it.:)

Hope this helps.

Cheers.

[Fredrik]

Hello Elvin,

Thanks for your suggestion, one thing to note is that the problem is also on desktop.

https://drive.google.com/file/d/1Hgi3KIIVJUaOzG60x7Mqptj2mHVc1GO-/view

So when adding:

.main-navigation li.close-search {
    position: absolute !important;
    right: 0;
	}
}

It kind of fixes the problem, both on mobile and desktop. But on desktop, you want to keep the toggle on the left side because it’s more user-friendly and accessible.

But doing so causes another problem. When the close button is aligned to the left it covers the text once again.

https://drive.google.com/file/d/1O1FtXObyopIKR1uw5WErD0uvlf0R5PVi/view

So I guess some more dev is needed to fix this. Definitely a tough one for something so light.

[Author]

Posts