Hey there, I'm new to this!
I created a top bar with an active button that has the text "Základ" (basic) in it. I wanted to make it uncopyable for a better look, so I did, but now I can't make it bold! Setting font-weight: bold; is not working either. I am using an external CSS file. I don't want to give up on my dream of having a bold title that can't be copied, so I need your help. Any input would be greatly appreciated!
html,
body {
margin: 0px;
padding: 0px
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.2s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
text-align: center;
padding-left: 16px;
font-size: 20px;
}
#posunTlacitka {
transition: margin-left .4s;
text-align: center;
}
#posunListy {
transition: margin-left .5s;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
/*HORNÍ LIŠTA*/
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: rgb(243, 243, 243);
text-align: center;
padding: 0px 35px;
text-decoration: none;
font-size: 17px;
}
.topnav div {
float: left;
color: rgb(243, 243, 243);
text-align: center;
padding: 12px 30px;
text-decoration: none;
font-size: 17px;
}
.topnav a.active {
background-color: #62d1ff;
color: black;
}
/*LIŠTA NELZE KOPÍROVAT!*/
#noCopy::before {
content: 'Základ';
display: block;
} <div id="posunListy">
<div class="topnav">
<div id="posunTlacitka"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span></div>
<a class="active">
<h2 id="noCopy"></h2>
</a>
</div>
</div>