How to centre navigation dividers

Hi,

I am setting up my website and added website dividers with the code:

Quote

// Blue Square Nav Dividers //
.header-nav-item a:after {
  content: "◼";
  margin-left: 22px;
  color: #3195b3;
  font-size: 15px
}
div.header-nav-item:last-child>a:after {
    visibility: hidden;
}
// Remove Slash From Folder Nav //
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item a:after {
  content: "" !important;
}
// Remove Active Nav Line //
.header-nav-item--active a {
    background-image: none !important;
}

I am struggling to get the dividers to display exactly centre. Can anyone help, please?

Site: http://trout-finch-fxgz.squarespace.com

Password: centrenav

Thank you,

Try something like the following.

// Blue Square Nav Dividers //
.header-nav-item a:after {
  content: "◼";
  margin-left: 1vw;
  color: #3195b3;
  font-size: 15px
}
div.header-nav-item:last-child>a:after {
    visibility: hidden;
}
// Remove Slash From Folder Nav //
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item a:after {
  content: "" !important;
}
// Remove Active Nav Line //
.header-nav-item--active a {
    background-image: none !important;
}

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item{
    margin-left: 0px !important;
}

17 hours ago, Vigasan said:

Try something like the following.

// Blue Square Nav Dividers //
.header-nav-item a:after {
  content: "◼";
  margin-left: 1vw;
  color: #3195b3;
  font-size: 15px
}
div.header-nav-item:last-child>a:after {
    visibility: hidden;
}
// Remove Slash From Folder Nav //
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item a:after {
  content: "" !important;
}
// Remove Active Nav Line //
.header-nav-item--active a {
    background-image: none !important;
}

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item{
    margin-left: 0px !important;
}

 

Hi,

Thank you for your response. This worked perfectly for the first divider, however the following two are still off centre. Are you able to help with this please?

Bump.

On 10/16/2023 at 7:28 PM, LightandShapes said:

Bump.

It looks fine to me