customizing navigation bar

Site URL: https://www.ggcatalog.com/

Hi, I was wondering if anyone knew how I can make the phone number be on the very right of the navigation bar and making only the phone number be in bold? As of now, I was able to put it there by making it a link. 

Here is a code someone helped me with for creating the navigation bar:

.Header-inner.Header-inner--bottom {
   background: #75B9DC;
}
/* header search border */
header.Header .search-block input {
    border-color: #ff7900!important;
     border-width: 2px!important;
      border-radius: 25px!important;
}
/* Hide header search on mobile */
@media screen and (max-width:900px) {
.Mobile-bar .search-block {
    display: none;
}
}
 .sqs-search-page-input {
      border-radius: 50px;
}
 .sqs-search-container-item em {font-style:italics!important; font-weight:bold; background:#FFF}

div#categoryNav:before {
    content: "Tuan Phan";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    margin-bottom: 20px;
}

Thanks!

Add to Design > Custom CSS

nav.Header-nav--primary .Header-nav-item[href*="tel"] {
    position: absolute;
    right: 0px;
    font-weight: bold;
}

@tuanphan Thank you for the code! However, when I am in tablet mode, the "phone number" is on top of the "contact us" navigation bar. How can we fix this?

Try adding this code under

@media screen and (max-width:900px) and (min-width:641px) and (orientation:landscape) {
.Header-nav-item {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
.Header-inner.Header-inner--bottom {
    padding-left: 0 !important;
    flex-direction: column;
}
}