[Resolved] Menu is too much big

[Umad]

Hello there the menu is too big is there any way to tackle this big menu in very proper way ??
And in mobile version in want that slide Out Navigation.
Can you please help me out website link is attached you can check as well.

Check Screenshots too.
https://prnt.sc/i5ph9g
https://prnt.sc/i5phq9

[Tom]

Your menu item height is set to 150px, which is why the menu is so tall: Customize > Layout > Primary Navigation.

To enable the slideout navigation on mobile, you can go to Customize > Layout > Slideout Navigation and select Mobile Only.

[Umad]

Sorry you are not getting me correctly Tom let me explain this in details
Website Link: http://fortune5.host/

Can you please check secondary menu with Blue color i want that secondary menu sticky function with Slide effect same like primary menu but there is no option of doing secondary menu same sticky function of primary.
Screenshot for this: http://prntscr.com/i64813

While checking primary menu its has category > Category > Category > Category and its not easy to use even many sub categories are not display in normal display screen is there any way for that big menu that will be easy to use with simple presentation?
Screenshot for this: https://prnt.sc/i6479p

I am using slideout Navigation for mobile view but the menu item have no padding at both right and left side can you please let me know how to add padding both side that will not effect on primary menu.
Screenshot for this: https://prnt.sc/i6473p

Well main concern is menu and its too big can you please check City Departments > Community Development > GIS than you can see its big can you please help me out Tom ??

[Tom]

1. Ah, currently that’s not possible without custom javascript. It’s possible to stick the secondary navigation below the primary navigation with CSS, but only when it’s placed directly below the primary menu.

2. Using a mega menu might help: https://docs.generatepress.com/article/building-simple-mega-menu/

3. Try this CSS:

.main-navigation.slideout-navigation .main-nav ul li a {
    padding: 0 20px;
}

.main-navigation.slideout-navigation .dropdown-menu-toggle {
    padding-right: 20px;
}

Let me know if this helps or not 🙂

[Umad]

1) If possible with javascript above primary Header can you please let me know that script.
And send me script of sticky navigation i can put secondary below the primary menu

2) I am using mega menu as per your instruction but the problem is that its has 9 items check this screenshot http://prntscr.com/i6g657 but when i adding mega menu class than its showing just top 4 item like this screenshot http://prntscr.com/i6g6vg.
Ok if i want to use just Slideout Navigation on desktop view as well and remove that primary menu what will the steps for that.

3) I used css on slideout navigation for creating gap at right and left slide of item its works on left side but not on right side. Check screenshot https://prnt.sc/i6g997

[Tom]

1. Unfortunately this would be some pretty complex code I believe, which would take quite a bit of time to develop. It might make it into the premium theme at some point, but it’s a little out of the scope of this forum currently.

2. With that many items, it may be worth looking into a premium solution. The CSS method in the documentation is very simple, and not great for tons of items like that.

3. I just adjusted the CSS above – it should work now 🙂

[Umad]

I see ok leave that menu i want to just use slideout menu toggle at the right right in both mobile and desktop how to use that i think this slideout menu is better option for this ton of menu.
Check screenshot: https://prnt.sc/i6ow1y

[Tom]

To have only the slideout toggle, you need to remove every item from the Primary menu location. Then activate the slideout navigation on desktop + mobile.

That will make it so only the toggle is shown, and you’ll be able to create a separate menu for the actual slideout navigation.

[Author]

Posts