- This topic has 11 replies, 2 voices, and was last updated 4 years, 8 months ago by David.
-
AuthorPosts
-
August 8, 2019 at 7:36 am #978999David
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 #979126DavidStaffCustomer 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.
August 8, 2019 at 8:38 am #979152DavidThanks 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 #979162DavidStaffCustomer SupportI made an edit to the CSS above – give that a go.
Quite happy to see that it works!August 8, 2019 at 9:15 am #979182DavidWorking 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 #979196DavidStaffCustomer 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.August 8, 2019 at 9:27 am #979210DavidI’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 #979219DavidStaffCustomer SupportCan you put it back to hover and ill see if there is an alternative method.
August 8, 2019 at 9:56 am #979227DavidI’ve changed back David.
August 8, 2019 at 10:22 am #979245DavidStaffCustomer 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; }
August 8, 2019 at 10:39 am #979252DavidThat’s perfect ๐ Thanks so much David, great help as always!
August 8, 2019 at 1:24 pm #979368DavidStaffCustomer SupportGlad to be of help.
-
AuthorPosts
- You must be logged in to reply to this topic.