Jump to content

Hide Navigation Link Text but Not Navigation Link Backgrounds

By wildflowertides, in Code Blocks

Recommended Posts

wildflowertides Level 4

wildflowertides

Posted
Posted (edited)

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 by wildflowertides
Link to website
Link to comment
  • Replies 11
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

wildflowertides
wildflowertides

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
Ziggy

Can you try it with the !important

wildflowertides
wildflowertides

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;

Posted Images

Ziggy Level 14

Ziggy

Posted
Posted

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;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
wildflowertides Level 4

wildflowertides

Posted
  • Author
Posted
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?

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted

Try adding this: 

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted

Looks like you'll need this as well: 

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
wildflowertides Level 4

wildflowertides

Posted
  • Author
Posted
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;
}

 

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted

Can you try it with the !important

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Link to comment
wildflowertides Level 4

wildflowertides

Posted
  • Author
Posted
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;
}

 

Link to comment
wildflowertides Level 4

wildflowertides

Posted
  • Author
Posted
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!

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources