Jump to content

CSS Code to edit primary menu/navigation on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hi there,

The website I am currently building has one page living in the header/main navigation.  That page has been built as a drop down to three subsequent pages. 

 

I am looking to customize the experience on mobile.  Currently when the hamburger is clicked on, the action will reveal the parent page, which leads to the three sub pages (I've attached imagery of the page path for context). I'd like to have the action be that when the hamburger is clicked on the three sub pages are revealed.   Additionally, I would like the back text to read the name of the parent page (portfolio).

 

Any guidance on CSS would be greatly appreciated.  

Many thanks in advance,

Katie

Screen Shot 2023-10-16 at 10.29.00 AM.png

Screen Shot 2023-10-16 at 10.27.55 AM.png

Screen Shot 2023-10-16 at 10.28.06 AM.png

Link to comment
  • Replies 3
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Try adding to Website Tools (under Not Linked) > Custom CSS

@media only screen and (max-width: 767px) {
  .header-menu-nav-folder[data-folder="root"] {
    display: none !important;
  }
  .header-menu-nav-folder-content .header-menu-controls {
    display: none;
  }
  .header-menu-nav-folder:not([data-folder="root"]) {
    transform: unset;
    transition: unset;
  }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

I am so sorry for the delay in responding to this, THANK YOU!

 

This code is great and does the job. However is there a possibility that the text that initially was labelled 'back' could read the name of the menu tab.  In this instance, it would read 'portfolio'.

 

I appreciate your assistance.  Thank you so much  

Link to comment
On 10/30/2023 at 11:01 PM, bykatieboyle said:

I am so sorry for the delay in responding to this, THANK YOU!

 

This code is great and does the job. However is there a possibility that the text that initially was labelled 'back' could read the name of the menu tab.  In this instance, it would read 'portfolio'.

 

I appreciate your assistance.  Thank you so much  

You mean rename "back"?

What is site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.