Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems with CSS in menu

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #272284
    arosew
    Participant

    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

    #272340
    Dagny
    Participant

    Please format your code and link an example with Codepen so we can help you.

    #272347
    arosew
    Participant

    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

    #272348
    Beverleyh
    Participant

    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).

    #272349
    Pogany
    Participant

    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.

    #272376
    arosew
    Participant

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.