Header Navigation Line Break for One Item and Hover Action

Site URL: http://resoluteempire.com

I need my first navigation link to break on two lines so that the phone number (1300EMPIRE) is on one line and the actual number is on the line below, but I want the email to stay as is. I also want when the user hovers on the item there is a thick gold bar #BD902f  that shows under the item but the link stays black. 

URL http://resoluteempire.com

Password: resolute

I tried the following for the hover item, which worked for a while and then stopped when I tried to list max width on a nav item "a" :

/* Nav item color */
.header-nav-item a {
    color: black !important; 
}
/* Nav item hover color */
.header-nav-item>a:hover {
    color: #00000 !important;
.header-nav-item>a:hover {
      padding-bottom: 15px !important;
}
.header-nav-item>a:hover {
      border-bottom: 3px color #BD902f 
}
}
  

Thank you, that worked! I was wondering if you could help me make the thick gold bar appear on hover? For some reason that code that I listed above doesn't work anymore. 

On 9/12/2022 at 10:34 PM, laargon said:

Thank you, that worked! I was wondering if you could help me make the thick gold bar appear on hover? For some reason that code that I listed above doesn't work anymore. 

I sent via email, however you should use this code, it would be better

.header-nav-item>a {
    border-bottom: 4px solid transparent;
}
.header-nav-item>a:hover {
    border-color: #bd902f;
}