Need some assistance with CSS - code I was using before worked but now wont

HTML & CSS
1

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");
}
1 Like
2

May I know the URL of your site? It would help me to investigate the issue.

3

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
4

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/

6

Not sure why this was unlisted? New here. Anyways, the corrections dont seem to work either. I dont know if I am trying to apply CSS to the wrong element or what. Additional assistance required. Thanks.

8

There is no my-account-nav id or woocommerce-MyAccount-navigation-link–orders class in your html, so the css is not selected, hence no icon…

Double check your selector

9

Here is the class for that element using FF console, I cant get the :before to work in this. I am also using CSSHero which will show other alternatives… nothing seems to work. Sorry about being a noob…

Class
Class1574Ă—422 208 KB

10

Do you have to be logged in to see it, because I don’t see any woocommerce classes except for on the body.

If you have to be logged in, do you have a test account? Otherwise, I’m not sure how much people are going to be willing to help you out…

11

I can set up a test account… Let me run this by you. Basically what I have is a nav list of links… So

Dashboard (icon)

Account

Profile

Etc. When the page loads an Icon is visible next to the Dashboard text. When I hover the mouse over the Account link the icon changes from the Dashboard field next to the Account text field and so on. I was using :before to accomplish this and now it wont work with the new classes produced by the new plugin Im using.

Is :before the appropriate selector for these elements? I can get hover to work but not before or after. Maybe Im going about this the wrong way. Let me know on this part and depending on what you indicate I can create a test account. Thank you!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.