7.1 Font Awesome and Mobile Nav Buttons

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;
}

1 hour ago, swvarian said:

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;
}

Change this code

@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;     
  }
}

to

@media screen and (max-width: 767px) {
  [data-folder="root"] > .header-menu-nav-folder-content > .header-menu-nav-item:nth-child(4) > a::before {
    content: '\f3c5';
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 9px;
    color: #9abb91;
    font-size: 20px;
  }

  [data-folder="root"] > .header-menu-nav-folder-content > .header-menu-nav-item:nth-child(5) > a::before {
    content: '\f098';
    font-family: FontAwesome;
    display: inline-block;
    padding-right: 9px;
    color: #9abb91;
    font-size: 20px;
  }
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

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

2 hours ago, swvarian said:

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

Try

[data-folder="root"]>.header-menu-nav-folder-content>.header-menu-nav-item:nth-child(4)>a,
[data-folder="root"]>.header-menu-nav-folder-content>.header-menu-nav-item:nth-child(5)>a {
  font-weight: bold;
}

Hope it could help

Excellent! Worked perfectly. Thanks again!!

@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

15 hours ago, swvarian said:

@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

 

What is your issue?