I was using the standard theme for WooCommerce on a nav list page. This was the CSS I used and it worked very well.
.page-id-7 .row #my-account-nav > .woocommerce-MyAccount-navigation-link--orders> a:before{
background-color: transparent;
display: block;
padding: 0px 40px 10px 0px;
margin: 5px -15px 5px 0px;
background-size: 30px 30px;
position: absolute;
background-repeat: no-repeat;
background-image: url("https://www.xxxxxxxxxxxxxxx.com/wp-content/uploads/2022/03/round-blue-glossy-button-with-white-arrow-left.png");
}
Basically when the page loaded the icon was visible next to the first nav link text. As you moved your cursor down to the next nav link line the icon disappeared from the first one and moved to this one, and so forth down the list. Yet if you reloaded the page it would default back to the icon appearing on the first nav line…
The original theme nav list was slightly restrained so I bought a plugin that allows me more flexibility. I have reached out to the plugin authors but they are not responding… I dont mind coding, I just cant seem to figure out why this is not working… I had to change the positioning of this version to get the icon to line up next to the text. However the :before state does not work. First, am I doing this the correct way using this function, or is there a better way of doing it? Without changing the php I would like to keep it as simple as possible with just css changes. Thank you.
.page-id-7 .tgwc-woocommerce-MyAccount-navigation.woocommerce-MyAccount-navigation-link--dashboard > a:before{
background-color: transparent;
display: block;
background-position: 120px 11px !important;
background-size: 30px 30px;
background-repeat: no-repeat;
background-image: url("https://www.xxxxxxxxxxxx.com/wp-content/uploads/2022/03/round-blue-glossy-button-with-white-arrow-left.png");
}
May I know the URL of your site? It would help me to investigate the issue.
Just checked the image link you are using… and looks like the server isn’t responding. Basically, the image url you provided isn’t working. Try changin the url of the image and retry again. This is quite common, a site would have provided an image for a while and after it would have shut down for some reason.
1 Like
The website is down for maintenance. That is why the icon is probably not working for you. I will take it out of maintenance mode for a day or two. Here is the page… https://www.sonorandesertbodyworks.com/my-account/