NICOLELEIGH9 Posted June 2, 2022 Share Posted June 2, 2022 I want to add a custom "line" under the navbar page. In stead if a basic line when you are on each page, I'dd like to replace it with an icon. See attached. I figured out how to add an icon to the side oof each link, but not underneath when you click on the page. Site isn't live yet. Link to comment
tuanphan Posted June 3, 2022 Share Posted June 3, 2022 Yes. Possible. If you share link to your site, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
NICOLELEIGH9 Posted June 3, 2022 Author Share Posted June 3, 2022 https://cricket-poodle-pdnh.squarespace.com Link to comment
tuanphan Posted June 10, 2022 Share Posted June 10, 2022 On 6/3/2022 at 10:08 PM, NICOLELEIGH9 said: https://cricket-poodle-pdnh.squarespace.com Try adding to Design > Custom CSS. Replace with new image url div.header-nav-item--active>a:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg); background-size: cover; width: 100%; height: 5px; display: block; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
NICOLELEIGH9 Posted June 13, 2022 Author Share Posted June 13, 2022 On 6/10/2022 at 12:15 AM, tuanphan said: Try adding to Design > Custom CSS. Replace with new image url div.header-nav-item--active>a:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg); background-size: cover; width: 100%; height: 5px; display: block; } Thank you! The original solid line also shows up with the image. Is there a way to replace that single line with only the image? See what appears when I added your code. Link to comment
tuanphan Posted June 14, 2022 Share Posted June 14, 2022 15 hours ago, NICOLELEIGH9 said: Thank you! The original solid line also shows up with the image. Is there a way to replace that single line with only the image? See what appears when I added your code. Add this code under .header-nav-item a { background-image: none !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
NICOLELEIGH9 Posted June 14, 2022 Author Share Posted June 14, 2022 On 6/10/2022 at 12:15 AM, tuanphan said: Try adding to Design > Custom CSS. Replace with new image url div.header-nav-item--active>a:after { content: ""; background-image: url(https://cdn.pixabay.com/photo/2022/03/08/07/08/water-7055153__480.jpg); background-size: cover; width: 100%; height: 5px; display: block; } Fantastic, thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment