CODEWITHSUNDEEP
csswordpress
Jennifer Leong
Jennifer Leong

Reputation: 13

CSS Help - Trying to make menu items clickable in mobile, but not on PC

Basically I'm working on this site - www.docksteaderlending.ca

I am not a developer by any means but i have basic css and html knowledge.

Client wants a simple one page site, no other pages. But wants apply now button, email, and telephone number in top header. I achieved this by using custom links in the wordpress menu, and linking to mailto:xxx and tel:xxx

Client comes back, and says that he doesn't like that you can't highlight and copy the text (doesn't like that it automatically opens up a mail client).

What I'm trying to do is make the text selectable, which i managed to do by adding the following css:

.unclickable > a:hover { pointer-events: none; cursor: default; }

It worked, although it messed up the cursor a bit. However, i realized the problem is mobile. The links aren't clickable, but you also can't select them on mobile either.

I've tried using user-select, but it doesn't seem to do anything. This is the code i used below:

    .selectable p {  
  -webkit-user-select: all;  /* Chrome all / Safari all */
  -moz-user-select: all;     /* Firefox all */
  -ms-user-select: all;      /* IE 10+ */
  user-select: all;          /* Likely future */   
  }

Ideally, what I would like to do is make the links both clickable and selectable, it seems like the simplest solution and allow the user to choose, while allowing for mobile functionality. But i've reached the end of my knowledge and google doesn;t seem to be helping.

Any help is appreciated. If you check the website, i've left the email address with the unclickable class, while the phone number has no additional css classes (except for the font awesome icon, but that is irrelevant)

Upvotes: 0

Views: 61

Answers (1)

John Halsey
John Halsey

Reputation: 2008

I would probably suggest a media query so that the .unclickable class is only applied on devices above mobile browser width

@media (min-width: 768px){
    .unclickable > a:hover {
    pointer-events: none;
    cursor: default;
}

Upvotes: 1

Related Questions