Stop user-selection in Bootstrap navbar

Question

I would like to prevent user-selection to be possible on a Boostrap navbar, such as :

http://getbootstrap.com/examples/navbar-fixed-top/

How to stop user-selection ?

I tried user-select: none; but it fails if you do CTRL-A.

Note : I don't want to stop user to copy text on the page, but I want to provide better user experience by avoiding selection of navbar elements.

Solution 1

You could do it like this:

Bootply - DEMO

.navbar {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;    
}

More Info:

Mozilla MDN user-select

CSS-Tricks user-select

Solution 2: Disable user selection when press CTRL+A

You could also do it by set the ::selection background color to none

Bootply - DEMO

div.navbar *::-moz-selection {
    background: none !important;
}
div.navbar *::selection {
    background: none !important;
}
.navbar {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;    
}

Solution 2

In bootstrap 4.5 and above, you can just use class="user-select-none"