tuanphan Posted October 3 Share Posted October 3 If code doesn't work, you can send link to your site + exact code you added, I can check problem easier. To replace Navigation Item with custom icon, image, you can follow these steps. #1. First, you need to know this #2. Use this code to Website Tools > Custom CSS /* do not delete this code */ nav>div.header-nav-item>a, [data-folder="root"]>div>div>div a { color: transparent !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } /* end - do not delete this code */ /* item 1 */ nav>div.header-nav-item:nth-child(1)>a, [data-folder="root"]>div>div>div:nth-child(1) a { background-image: url(https://cdn.pixabay.com/photo/2024/01/22/16/33/pelican-8525794_1280.jpg); } /* item 2 */ nav>div.header-nav-item:nth-child(2)>a, [data-folder="root"]>div>div>div:nth-child(2) a { background-image: url(https://cdn.pixabay.com/photo/2023/12/28/19/14/boy-8474750_1280.jpg); } /* item 3 */ nav>div.header-nav-item:nth-child(3)>a, [data-folder="root"]>div>div>div:nth-child(3) a { background-image: url(https://cdn.pixabay.com/photo/2024/01/14/23/11/siamese-crocodile-8509003_1280.jpg); } /* item 4 */ nav>div.header-nav-item:nth-child(4)>a, [data-folder="root"]>div>div>div:nth-child(4) a { background-image: url(https://cdn.pixabay.com/photo/2023/06/18/12/02/landscape-8071910_1280.jpg); } /* item 5 */ nav>div.header-nav-item:nth-child(5)>a, [data-folder="root"]>div>div>div:nth-child(5) a { background-image: url(https://cdn.pixabay.com/photo/2024/01/30/14/29/field-8542201_1280.jpg); } #3. Result #4. Follow this to find Image/Icon url 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment