Phone number in my navigation bar

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? 

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

Can you site be accessible?

Hello! 

Its not public yet, but I have a password on it.

Can I send you the link and passord somewhere else? 🙂

<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!! 

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

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

Thank you, do you have the code? 🙂

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