I've added a graphic arrow after "Register" in the nav bar. It's displaying correctly in Chrome, but in Safari it's in the bottom right of the browser window.
Anyone have some insight? I feel like I've tried everything…
Website: https://rtrx.co/
.nav-register {
margin-right: 9px;
}
.nav-register:after {
content: "";
background: url("https://rtrx.wpenginepowered.com/wp-content/uploads/2024/01/button-arrow-black.svg") no-repeat;
background-size: contain;
display: inline-block;
height: 1.2222222222222223rem;
width: 1.2222222222222223rem;
position: fixed;
bottom: 20px;
right: 20px;
}
I think you will find that if you modify it to use position: relative and position: absolute you will get better results
playing around with your linked website, this spacing appears to give the expected result.
.nav-register {
margin-right: 9px;
position: relative;
}
.nav-register:after {
content: "";
background: url("https://rtrx.wpenginepowered.com/wp-content/uploads/2024/01/button-arrow-black.svg") no-repeat;
background-size: contain;
height: 1.2222222222222223rem;
width: 1.2222222222222223rem;
position: absolute;
bottom: 22px;
right: -20px;
}
As a note to this, there is really no reason you need this to be added via CSS as it's just adding an image to a button. Seems like it might make more sense to just add the image to the html. Feels like using a hammer with screws to me.