Hide Navigation Link Text but Not Navigation Link Backgrounds

wildflowertides · September 17, 2023

Hi, everyone. I want to hide the text in my navigation, but I don't want to hide the backgrounds I've managed to put for each navigation link. The workaround I've found is deleting the navigation name in the navigation organization tree, which makes it difficult to stay organized. I would like to know if there is a proper way to do

Additionally, I despise the default location of the social media links in this header format. Is there a way to position them in the very top right corner? Current Layout

Thank you in advance!

Current code (I haven't even begun on the social links!):

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:35px;
  width: 35px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: 2px;
    margin-left: 0px;
  display: inline-block;
}

.header-nav-item--active a {
 background-image: none !important;
}

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png');
    height:27px;
  width: 27px;
}

.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item:nth-child(2) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png');
}

.header-nav-item:nth-child(2) a,
{color:#E205C1}

.header-nav-item:nth-child(3) a::before,
.header-menu-nav-item:nth-child(3) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png');
      height:27px;
  width: 27px;}

.header-nav-item:nth-child(4) a::before,
.header-menu-nav-item:nth-child(4) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png');
}

.header-nav-item:nth-child(5) a::before,
.header-menu-nav-item:nth-child(5) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png');
}


.header-nav-item:nth-child(6) a::before,
.header-menu-nav-item:nth-child(6) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png');
      height:30px;
  width: 30px;
}

Edited September 17, 2023 by wildflowertides
Link to website

Ziggy · September 18, 2023

You can try this Custom CSS:

// hide titles
.header-nav-item a,
.header-menu-nav-item a {
  font-size:0px;
}

// Rearrange navigation
.header-display-desktop {
    align-items: flex-start;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    margin-right: auto;
    margin-left: 25%;
}
.header-layout-branding-center-nav-center .header-actions--left {
    order: 2;
}

wildflowertides · September 19, 2023

On 9/18/2023 at 2:59 AM, Ziggy said:

You can try this Custom CSS:

// hide titles
.header-nav-item a,
.header-menu-nav-item a {
  font-size:0px;
}

// Rearrange navigation
.header-display-desktop {
    align-items: flex-start;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    margin-right: auto;
    margin-left: 25%;
}
.header-layout-branding-center-nav-center .header-actions--left {
    order: 2;
}

Ziggy, thanks so much. That worked wonders on the top navigation, but one of my items is a folder and has subnavigation. I do want the sub-navigation titles visible. Any idea how to make that happen?

Ziggy · September 19, 2023

Try adding this:

.header-nav-folder-item-content {
  font-size:1rem;
}

wildflowertides · September 19, 2023

2 minutes ago, Ziggy said:
Try adding this:
.header-nav-folder-item-content {
  font-size:1rem;
}

It worked but only for the top page in the folder.

Ziggy · September 19, 2023

Looks like you'll need this as well:

.header-nav-folder-item .header-nav-folder-item--external {
  font-size:1rem !important;
}

wildflowertides · September 19, 2023

4 minutes ago, Ziggy said:
Looks like you'll need this as well:
.header-nav-folder-item .header-nav-folder-item--external {
  font-size:1rem !important;
}

It's still only the top one, as in the last photo, unfortunately. 😞 I have included my code, now.

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:35px;
  width: 35px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: 2px;
    margin-left: 0px;
  display: inline-block;
}

.header-nav-item--active a {
  background-image: none !important;}



// hide titles
.header-nav-item a,
.header-menu-nav-item a {
  font-size:0px;}

.header-nav-folder-item-content, .header-nav-folder-item .header-nav-folder-item--external {font-size:1rem;
}

// Rearrange navigation
.header-display-desktop {
    align-items: flex-start;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    margin-right: auto;
    margin-left: 25%;
}
.header-layout-branding-center-nav-center .header-actions--left {
    order: 2;
}


.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png');
    height:27px;
  width: 27px;
}

.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item:nth-child(2) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png');
}

.header-nav-item:nth-child(2) a,
{color:#E205C1}

.header-nav-item:nth-child(3) a::before,
.header-menu-nav-item:nth-child(3) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png');
      height:27px;
  width: 27px;}

.header-nav-item:nth-child(4) a::before,
.header-menu-nav-item:nth-child(4) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png');
}

.header-nav-item:nth-child(5) a::before,
.header-menu-nav-item:nth-child(5) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png');
}


.header-nav-item:nth-child(6) a::before,
.header-menu-nav-item:nth-child(6) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png');
      height:30px;
  width: 30px;
}

Ziggy · September 19, 2023

Can you try it with the !important

wildflowertides · September 25, 2023

On 9/19/2023 at 9:32 AM, Ziggy said:

Can you try it with the !important

It is the same. Only the first of the drop down is showing.

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:35px;
  width: 35px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: 2px;
    margin-left: 0px;
  display: inline-block;
}

.header-nav-item--active a {
  background-image: none !important;}



// hide titles
.header-nav-item a,
.header-menu-nav-item a {
  font-size:0px;}

.header-nav-folder-item-content, .header-nav-folder-item .header-nav-folder-item--external {font-size:1rem !important;}

// Rearrange navigation
.header-display-desktop {
    align-items: flex-start;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    margin-right: auto;
    margin-left: 25%;
}
.header-layout-branding-center-nav-center .header-actions--left {
    order: 2;
}


.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png');
    height:27px;
  width: 27px;
}

.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item:nth-child(2) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png');
}

.header-nav-item:nth-child(2) a,
{color:#E205C1}

.header-nav-item:nth-child(3) a::before,
.header-menu-nav-item:nth-child(3) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png');
      height:27px;
  width: 27px;}

.header-nav-item:nth-child(4) a::before,
.header-menu-nav-item:nth-child(4) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png');
}

.header-nav-item:nth-child(5) a::before,
.header-menu-nav-item:nth-child(5) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png');
}


.header-nav-item:nth-child(6) a::before,
.header-menu-nav-item:nth-child(6) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png');
      height:30px;
  width: 30px;
}

wildflowertides · October 1, 2023

On 9/19/2023 at 9:32 AM, Ziggy said:

Can you try it with the !important

FYI, I just abandoned this as I could not get it to work. Thanks for all your help, Ziggy.

tuanphan · October 3, 2023

Do you still need help on this issue?

wildflowertides · October 6, 2023

On 10/3/2023 at 2:15 AM, tuanphan said:

Do you still need help on this issue?

If you can offer help on this navigation issues, I would love some! She really likes the icon look! This was the last code I tried. The dropdown on the Services icon were blank and I wanted them visible.

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:35px;
  width: 35px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: 2px;
    margin-left: 0px;
  display: inline-block;
}

.header-nav-item--active a {
  background-image: none !important;}



// hide titles
.header-nav-item a,
.header-menu-nav-item a {
  font-size:0px;}

.header-nav-folder-item-content, .header-nav-folder-item .header-nav-folder-item--external {font-size:1rem !important;}

// Rearrange navigation
.header-display-desktop {
    align-items: flex-start;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    margin-right: auto;
    margin-left: 25%;
}
.header-layout-branding-center-nav-center .header-actions--left {
    order: 2;
}


.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3444a0033485e6ad57e/1694954308502/1.png');
    height:27px;
  width: 27px;
}

.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item:nth-child(2) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f356f41ef323763d12c5/1694954326374/2.png');
}

.header-nav-item:nth-child(2) a,
{color:#E205C1}

.header-nav-item:nth-child(3) a::before,
.header-menu-nav-item:nth-child(3) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f3604a0033485e6adcce/1694954336586/3.png');
      height:27px;
  width: 27px;}

.header-nav-item:nth-child(4) a::before,
.header-menu-nav-item:nth-child(4) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f36c93d8ad20f6e22974/1694954348335/4.png');
}

.header-nav-item:nth-child(5) a::before,
.header-menu-nav-item:nth-child(5) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f94fdfdcbc12f579aed0/1694955855403/7.png');
}


.header-nav-item:nth-child(6) a::before,
.header-menu-nav-item:nth-child(6) a::before {
  background: url('https://static1.squarespace.com/static/64f9d6ee7f27b67c781b9044/t/6506f383b8b21d565fa09cb4/1694954371771/6.png');
      height:30px;
  width: 30px;
}

I'm also having a new issue with custom fonts not appearing. I got a new MacBook Pro with SonomaOS and I am not seeing my fonts in Safari, Chrome or Vivaldi that were appearing fine on Windows Chrome, Firefox and Edge. Should I make a new thread for that issue too?

@font-face {font-family: 'Owerstinn'; src:('https://static1.squarespace.com/static/6515e150efa4b86d81f0cd80/t/65162cab3a614c44bfc067d5/1695952043484/OWERSTINN-BF642a5e899dfe4.otf');}
        
@font-face {
    font-family: 'Gotu Regular';
      src:('https://static1.squarespace.com/static/6515e150efa4b86d81f0cd80/t/6518180b23d07e0831cf1f4d/1696077835881/Gotu-Regular.ttf');}
        
h1 {font-family: 'Owerstinn'; text-transform: uppercase;}
h2 {font-family: 'Owerstinn'; text-transform: uppercase;}
h3 {font-family: 'Gotu Regular'; text-transform: uppercase;}
h4 {font-family: 'Gotu Regular';}

Thank you!

Hide Navigation Link Text but Not Navigation Link Backgrounds

Recommended Posts

wildflowertides

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

wildflowertides

Ziggy

wildflowertides

Posted Images

Ziggy

wildflowertides

Ziggy

wildflowertides

Ziggy

wildflowertides

Ziggy

wildflowertides

wildflowertides

tuanphan

wildflowertides

Create an account or sign in to comment

wildflowertides

Ziggy

wildflowertides

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources