Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ElineBredesen

Phone number in my navigation bar

Question

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

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

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

Can you site be accessible?

 


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post
  • 0
<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!! 

Share this post


Link to post
  • 0
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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post
  • 0
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


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...