Jump to content

Header Navigation Line Break for One Item and Hover Action

Go to solution Solved by tuanphan,

Recommended Posts

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 

Link to comment
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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

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