hughw Posted August 11, 2022 Share Posted August 11, 2022 Site URL: https://sapphire-tarantula-yjf5.squarespace.com/about I am new to CSS but have managed to get so far building a custom website. I have managed to replace the page names in the header with icons - one relevant to each page of the website However, when on the selected page, the icon relevant to that page disappears from the header. How do I stop that happening? The other thing I'd like is for the header icons to be replaced by a different image when I hover over them too. Is that possible? Current CSS for the header is as follows: .header-title-logo a:hover img { visibility: hidden; } .header-title-logo a:hover { background-image: url('https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f4c04f683a34534353bba8/1660207184002/Young+Poet+Logo+Off+White+RGB.png'); background-size: contain; } /* About */ .header-announcement-bar-wrapper [href="/about"] { height: 100px; width: 100px; background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0ce2bd9ea019639e89d/1660145870369/Shape+of+sound+texture+1+Deep+Black+RGB.png); background-size: contain; background-repeat: no-repeat; background-position: right right; color: transparent !important; } /* Artists */ .header-announcement-bar-wrapper [href="/artists"] { height: 100px; width: 100px; background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0efc5d983332cd5ef88/1660145903483/Shape+of+sound+texture+4+Deep+Black+RGB.png); background-size: contain; background-repeat: no-repeat; background-position: right right; color: transparent !important; } /* Store */ .header-announcement-bar-wrapper [href="/store"] { height: 100px; width: 100px; background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0d9ab04002143fd6cda/1660145881907/Shape+of+sound+texture+2+Deep+Black+RGB.png); background-size: contain; background-repeat: no-repeat; background-position: right right; color: transparent !important; } /* Contact */ .header-announcement-bar-wrapper [href="/contact"] { height: 100px; width: 100px; background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0e3ab04002143fd6d19/1660145891327/Shape+of+sound+texture+3+Deep+Black+RGB.png); background-size: contain; background-repeat: no-repeat; background-position: right right; color: transparent !important; } Link to comment
tuanphan Posted August 14, 2022 Share Posted August 14, 2022 Hi. The site is private. Can you setup an access password? We can check easier 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