How to make menu navigation a drop down on mobile

On 5/2/2023 at 3:48 PM, JDSTAREK said:

@arielestulin, Lauren_C didn't use the plug-in. I'm trying to write the code. The plug-in is more-or-less just code that someone else wrote to solve the problem...and you can pay for the code. Not my thing, I'd rather write it myself. 

Any update on this code??

On 6/20/2023 at 1:40 AM, tuanphan said:

What should it look like on mobile? We can help easier

I would like mine to look like Lauren’s as well. The functionality of it. I can mess with the colors. Here is what mine currently looks like https://www.framed-view-designs.com

I would like the submenu pages to just open below the main navigation folder on press. Mobile only

Still need a little help here please. I’ve looked everywhere 

On 11/2/2023 at 9:38 PM, FramedView said:

Still need a little help here please. I’ve looked everywhere 

I think she used Snazzyview Mega Menu Plugin to achieve this type of menu on mobile

https://snazzyview.com/squarespace-plugins/p/mega-menu-plugin-squarespace

I am going to echo a few of you who have expressed frustration that Squarespace themselves do not find the standard mobile menu appealing, and instead use the dropdown style. Yet, they do not give the users an option to do so without buying a plugin. Thanks for becoming Wordpress, Squarespace.

4 hours ago, DrewSomething said:

I am going to echo a few of you who have expressed frustration that Squarespace themselves do not find the standard mobile menu appealing, and instead use the dropdown style. Yet, they do not give the users an option to do so without buying a plugin. Thanks for becoming Wordpress, Squarespace.

Hallelujah! I couldn’t agree more. 

Wordpress it is not, but I do agree, the mobile drop down should be more web standard

On 2/4/2023 at 12:16 AM, Lauren_C said:

Hello, 

https://lifecycles-lca.squarespace.com/

PW: lifecycles123

I have forced the mobile menu on desktop and would like dropdown folders as in the first image: 

I have reached out to Chris Schwartz-Edmisten to see if the plugin is compatible. But any help in the meantime would be appreciated. 

I'm struggling to align the + icon at the right of the nav - can anyone help with that? 

Many thanks! 

 

Could you please share your code for this effect, this is exactly what im after!!! thank you @Lauren_C

https://moonlitdesign.uk/home-old 

@tuanphan

On 10/30/2023 at 2:50 PM, jnmillre said:

Any update on this code??

@jnmillre did you manage to write the code? would be super incredible! thank you

https://moonlitdesign.uk/home-old

On 3/22/2024 at 9:14 PM, moonlitdesign said:

Could you please share your code for this effect, this is exactly what im after!!! thank you @Lauren_C

 

https://moonlitdesign.uk/home-old 

 

@tuanphan

I see you figured it out

On 3/25/2024 at 9:46 AM, tuanphan said:

I see you figured it out

Hey @tuanphan i paid for a plugin 🙂

I do however need help to disable the menu counter on the sub navigation, and make sure the menu counter is in the same position (a little higher than the page menu links) when the menu is opened from all pages.

currently, when you open the menu from the homepage, the counters are in line with the menu links, and when you open the menu from any other page, the counters are showing much higher!

any thoughts would be so appreciated thank you

www.moonlitdesign.uk/home-old

On 3/25/2024 at 7:19 PM, moonlitdesign said:

Hey @tuanphan i paid for a plugin 🙂

I do however need help to disable the menu counter on the sub navigation, and make sure the menu counter is in the same position (a little higher than the page menu links) when the menu is opened from all pages.

currently, when you open the menu from the homepage, the counters are in line with the menu links, and when you open the menu from any other page, the counters are showing much higher!

any thoughts would be so appreciated thank you

www.moonlitdesign.uk/home-old

Use this CSS code

div.header-menu-nav-item [data-folder] .header-menu-nav-item:before {
    display: none;
}
.header-menu-nav-item:before {
    position: relative;
    top: -10px;
}

45 minutes ago, tuanphan said:

Use this CSS code

div.header-menu-nav-item [data-folder] .header-menu-nav-item:before {
    display: none;
}
.header-menu-nav-item:before {
    position: relative;
    top: -10px;
}

 

thanks! this in theory works, but makes the menu when open from another page even more messed up.

im not sure why it is appearing differently from different pages! crazy. 

On 3/27/2024 at 3:58 PM, moonlitdesign said:

thanks! this in theory works, but makes the menu when open from another page even more messed up.

im not sure why it is appearing differently from different pages! crazy. 

 

 

Use this CSS code to fix problem

@media screen and (max-width: 767px) {
.header-menu-nav-item:before {
    top:  unset;
    display: flex;
    justify-content: center;
    align-items: center;
}}

Hey @tuanphan i can't believe it my menu has broken again some how hahah!!!

the thing is it works perfectly when opening it from content pages, so it's something on the homepage that is messing with it. 

would love to know any insights you have on this.

I feel like there must be some code that i need to wrap in a desktop media query, but i have no idea which one. 

On 4/11/2024 at 10:30 PM, moonlitdesign said:

Hey @tuanphan i can't believe it my menu has broken again some how hahah!!!

the thing is it works perfectly when opening it from content pages, so it's something on the homepage that is messing with it. 

would love to know any insights you have on this.

I feel like there must be some code that i need to wrap in a desktop media query, but i have no idea which one. 

 

I see you figured it out?

https://www.moonlitdesign.uk/selected-works

35 minutes ago, tuanphan said:

I see you figured it out?

https://www.moonlitdesign.uk/selected-works

yes i did thank you! it turns out on one of the type writer effect code blocks, had the code:

.container { justify-content:center;} etc.

and it was affecting the menu, so i just deleted the code block and replaced for static text.