Jump to content

7.1 Font Awesome and Mobile Nav Buttons

Recommended Posts

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

Screen Shot 2022-02-24 at 7.39.30 AM.png

Screen Shot 2022-02-24 at 7.39.38 AM.png

Edited by swvarian
Link to comment
  • swvarian changed the title to 7.1 Font Awesome and Mobile Nav Buttons
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;
}

Screen Shot 2022-02-24 at 7.39.30 AM.png

Screen Shot 2022-02-24 at 7.39.38 AM.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.