swvarian

Thank you! This works beautifully on desktop but nothing hovers on mobile. How can I do the same on mobile?
 
 
 

I appreciate your help! Thank you!
 

Thanks so much, @paul2009
I appreciate the help!
 

@bangank36 You were so helpful with this question. I was wondering if you knew anything about another question I posted. Title: 7.1 Homepage background video - Top is cropped off
Would you mind if I shared this question with you?
Thanks so much!
Sherry
 

Site URL: https://harp-algae-smyn.squarespace.com/
Hi. 
I set up font awesome (using unicode) for 2 specific buttons on the Navigation Bar. I want to do the same in mobile. This is the code I used. Which is great, until you go to the drop down menu. (see screenshot). 
How can I keep this only on the front page of the mobile navigation and not carry over to everything in the 4th and 5th position (New Patients and Appointments) Screenshot?

Thanks so much for your help!!
 
@media screen and (max-width:767px) {
.header-menu-nav-list .header-menu-nav-item:nth-child(4) a::before {
  content: '\f3c5';
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 9px;
    color: rgb(154, 187, 145); 
    font-size: 20px;
  }
}
@media screen and (max-width:767px) {
.header-menu-nav-list .header-menu-nav-item:nth-child(5) a::before {
  content: '\f098';
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 9px;
    color: rgb(154, 187, 145); 
    font-size: 20px;     
  }
}
.header-menu-nav-list .header-menu-nav-item:nth-child(4) {
     font-weight: 700;
}
.header-menu-nav-list .header-menu-nav-item:nth-child(5) {
     font-weight: 700;
}

@bangank36
Thank you so much! That works beautifully. Is there also a way to make the 2 buttons (next to the font awesome) on the mobile Nav bar bold?

Appreciate all your help!