- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I am trying to remove the image and/or border that appears when a user mouses over the “Contact Our Rental Agent” navigation item (red background).
Here is the code I am using for this menu item:
header li#menu-item-3144 a {background-color:red; border-radius:10px; padding:15px; color:white; }
Any help with this would be greatly appreciated.
Adria
Please format your code and link an example with Codepen so we can help you.
Here is the link to the page: http://d8w.8b4.myftpupload.com/
Here is the style sheet for this page: view-source:http://d8w.8b4.myftpupload.com/wp-content/themes/g5-beyot/style.css?ver=4.9.6&nocache=1
Here is the style I used for the “Contact Our Rental Agent”:
header li#menu-item-3144 a {background-color:red; border-radius:10px; padding:15px; color:white; }
Adria
There’s too much code there for us to comfortable look through.
A minimal CodePen is preferred, that is, just enough HTML and CSS to demo the problem (not the whole codebase).
Inside the .x-menu-a-text
there is a span class="x-menu-text"
.
On hover this span gets an ::after
pseudo-element, and this may be the culprit. You may add something like
.x-menu-a-text:hover .x-menu-text::after{display: none;}
but this ( if works ) would be botched code.
A minimal CodePen would help you and everybody else to understand what happens.
Thank you so much, here is what I did and it removed the arrow:
.x-menu-a-text:hover .x-menu-text::before{display: none;}
.x-menu-a-text:hover .x-menu-text::after{display: none;}
Now it is a matter of removing the line below.
Adria