Jump to content

Phone number in my navigation bar

Recommended Posts

Hello,

I am working on a website for a costumer, and he wants to have his number (clickable) in the navigation menu. I know that I can make a link, and add it to the menu, but I want it to stand more out than the rest (maybe bold), and to display beside the blue button (Prøv gratis). Is this possible somehow? 

Screenshot 2020-06-18 at 11.21.48.png

Link to comment
  • Replies 7
  • Views 3k
  • Created
  • Last Reply

Yes, you can create a link with the phone number and make custom css to change its stylesheet.

Can you site be accessible?

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
<style>
.header-nav-item a[href="tel:+4757721555"] {
  display: none;
}
.header-nav-item a[href="tel:+4757721555"].moved {
  display: block;
  font-size: 1.5em;
  font-weight: 600;
  color: #54bce0;
}
.header-actions-action--cta {
  margin-left: 2em;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector(".header-actions--right").insertBefore(document.querySelector('[href="tel:+4757721555"]').parentNode, document.querySelector(".header-actions-action--cta"))
    document.querySelector('[href="tel:+4757721555"]').classList.add("moved")
}, false);
</script>

This worked!! 

Link to comment
51 minutes ago, ElineBredesen said:

Is it possible to add a phone icon next to the number? 🙂

okie, I will use a temp image you can change later

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, ElineBredesen said:

Thank you, do you have the code? 🙂


<style>
.header-nav-item a[href="tel:+4757721555"] {
  display: none;
}
.header-nav-item a[href="tel:+4757721555"].moved {
  display: block;
  font-size: 1.5em;
  font-weight: 600;
  color: #54bce0;
}
.header-actions-action--cta {
  margin-left: 2em;
}
.header-nav-item a[href="tel:+4757721555"]:after {
    background: url(https://img.icons8.com/metro/50/000000/phone.png);
    background-size: contain;
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -30px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector(".header-actions--right").insertBefore(document.querySelector('[href="tel:+4757721555"]').parentNode, document.querySelector(".header-actions-action--cta"))
    document.querySelector('[href="tel:+4757721555"]').classList.add("moved")
}, false);
</script>

You can replace the icon as you wish

image.png.9328cfa4d3f328bf23462470b11d7b23.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.