Jump to content

How can I change the button order in my mobile nav?

Recommended Posts

Hi,

You can achieve this with the help of code editing. Edit html file of the website and here is the complete code, i test that in google chrome and its working fine for me.

<div class="header-menu-cta">
            <a class="theme-btn--primary btn" href="/appointments">
            Book an Appointment
            </a>
          <a class="theme-btn--primary btn" href="https://harp-robin-fsew.squarespace.com/https:/doxy.me/aszani">Telemedicine Waiting Room</a></div>


<div class="header-menu-nav-folder-content">

  <div class="container header-menu-nav-item header-menu-nav-item--collection">
    <a href="/about-aszani">
      
      About  Aszani
    </a>
  </div>

  <div class="container header-menu-nav-item header-menu-nav-item--collection">
    <a href="/supplements">
      
      Supplements
    </a>
  </div>

  <div class="container header-menu-nav-item">
    <a data-folder-id="/services" href="/services">
      <div class="header-menu-nav-item-content">
        <span class="visually-hidden">Folder:</span>
        <span>Services</span>
        <span class="chevron chevron--right"></span>
      </div>
    </a>
  </div>
  

  <div class="container header-menu-nav-item header-menu-nav-item--collection">
    <a href="/blog">
      
      Blog
    </a>
  </div>

  <div class="container header-menu-nav-item header-menu-nav-item--collection">
    <a href="/contact">    
      Contact
    </a>
  </div>
</div>

 

If you need my help just let me know.

Thank you

mobile.PNG

pc_view.PNG


Zohaib Hassan
Freelance CMS Designer and Developer
www.fiverr.com/users/amraal555
www.linktr.ee/amraal555

Link to comment
Quote

I don't think I have access to edit the html

You don't have access to the html files in the sense of files stored in directory/folder. CSS can help with this issue.

Add the following to Design > Custom CSS.

/* move cta buttons to top of mobile menu */

.header-menu-cta {

  order : -1;
  
  }

This is for a v7.1 site.

Technically you could manipulate the HTML with Javascript but CSS is much more efficient for this case.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 9/3/2021 at 1:22 AM, creedon said:

You don't have access to the html files in the sense of files stored in directory/folder. CSS can help with this issue.

Add the following to Design > Custom CSS.

/* move cta buttons to top of mobile menu */

.header-menu-cta {

  order : -1;
  
  }

This is for a v7.1 site.

Technically you could manipulate the HTML with Javascript but CSS is much more efficient for this case.

Let us know how it goes.

Thank you so much! This worked great.

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.