- This topic has 11 replies, 2 voices, and was last updated 1 year, 6 months ago by
David.
-
AuthorPosts
-
August 8, 2019 at 7:36 am #978999
David
Hello
Is it possible to change how the secondary menu works on mobile? so it works like this…
https://codepen.io/osvaldas/pen/xWNLXy
Thanks
DaveAugust 8, 2019 at 7:58 am #979126David
StaffCustomer SupportHi there,
would require custom development – the best i can do is:
1. Use only the JS that the Codepen provides.
2. Replace the first part of the JS ie.const container = document.querySelector('.tabs') const primary = container.querySelector('.-primary') const primaryItems = container.querySelectorAll('.-primary > li:not(.-more)') container.classList.add('--jsfied')
with this:
const container = document.querySelector('.secondary-navigation .inside-navigation .main-nav') const primary = container.querySelector('.secondary-menu') const primaryItems = container.querySelectorAll('.secondary-menu > li:not(.-more)') container.classList.add('--jsfied')
Then add this CSS:
@media (max-width: 768px) { #secondary-navigation .menu-toggle { display: none; } #secondary-navigation ul { display: block; } } .secondary-navigation .inside-navigation .main-nav { position: relative; } .secondary-navigation .inside-navigation .main-nav:not(.--jsfied) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .secondary-navigation .inside-navigation .main-nav .--hidden { display: none !important; }
Should get you somewhere in the right area.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 8, 2019 at 8:38 am #979152David
Thanks David – It’s start to work on Tablet but then goes back to normal menu on mobile? any ideas?
August 8, 2019 at 8:52 am #979162David
StaffCustomer SupportI made an edit to the CSS above – give that a go.
Quite happy to see that it works!Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 8, 2019 at 9:15 am #979182David
Working great David – one last thing, any idea how I can get the more sub links so they sit to the right and don’t go off the page? also, how do I get the arrow transition to work like it does on the codepen demo?
August 8, 2019 at 9:21 am #979196David
StaffCustomer SupportAwesome – that was easier then expected π
You can change the Drop Down direction in the Customizer > Layout > Primary Navigation.
Whilst you’re there can you change the Navigation Dropdown to Click Menu Item – ill then take a look at how to flip the arrow on click.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 8, 2019 at 9:27 am #979210David
I’ve changed Drop Down direction to Right and Navigation Drop-Down to Click Menu item, but it doesn’t seem to work now.
August 8, 2019 at 9:40 am #979219David
StaffCustomer SupportCan you put it back to hover and ill see if there is an alternative method.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 8, 2019 at 9:56 am #979227David
I’ve changed back David.
August 8, 2019 at 10:22 am #979245David
StaffCustomer SupportTry adding this CSS:
.secondary-navigation .inside-navigation .main-nav:not(.--show-secondary) .-secondary { display: none !important; } .secondary-navigation .inside-navigation .main-nav li.-more button span { display: inline-block; transition: -webkit-transform 0.2s; transition: transform 0.2s; } .secondary-navigation .inside-navigation .main-nav.--show-secondary li.-more button span { transform: rotateX(180deg); -webkit-transform: rotate(180deg); } .dropdown-hover .secondary-navigation:not(.toggled) ul li:hover>ul { right: 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 8, 2019 at 10:39 am #979252David
That’s perfect π Thanks so much David, great help as always!
August 8, 2019 at 1:24 pm #979368David
StaffCustomer SupportGlad to be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.