Jump to content

Move Navigation Position

Go to solution Solved by rwp,

Recommended Posts


#moving {
    color: #125781 !important;
    font-size: 14.5px !important;
    background: transparent !important;
    line-height: 0 !important;
    margin: 0 !important;

#moving .Header-nav-folder-item {
    color: rgba(176,176,176,.4) !important;

.Header-nav.Header-nav--secondary {
  display: flex !important;


$(document).ready(function() {
  $('.Header-nav-item.Header-nav-item--folder').attr('id', 'moving');


Link to comment


Worked! Thank you so much.

Sorry to bother, but I missed a few things out.

The new screenshot below shows it with the code you provided.

Can I make the folder icon:
- Shift to the right a bit so it is next to the 'Search' icon
- Same size and colour as the search icon
- Same space between itself and the search as search is from the customer icon

Basically to make it look like it's part of the far right menu (Search, Account, Card, Currency)

Thanks for the help! Really appreciate it.

Screenshot 2020-09-28 at 02.38.05.png

Link to comment
  • Solution

Replace the #moving css with this:

#moving {
    color: #737373 !important;
    font-size: 22.6px !important;
    background: transparent !important;
    line-height: 0 !important;
    margin: 1px -.3em 0 2em !important;


Edited by rwp
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.