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