Automatyczne podświetlanie się hiperłącza

pytanie zadane 1 czerwca 2020 w HTML i CSS przez WasiliewSaszka Użytkownik (700 p.)

Witam. Strona internetowa którą tworzę automatycznie podświetla mi ostatnie hiperłącze w interaktywnym menu co bardzo psuje efekt.

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Plata odczynniki</title>
	<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="css/fixed.css">
</head>

<body data-spy="scroll" data-target="#navbarResponsive">
	
<!--- start produkty section --->
<div id="produkty" class="offset">

	<!--- Start navigation --->
	<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
	  <a class="navbar-brand" href="#"><img src="img/plata.png"></a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse"
			  data-target="#navbarResponsive">
		  <span class="navbar-toggler-icon"></span>
	  </button>
		
<div class="collapse navbar-collapse" id="navbarResponsive">
	<ul class="navbar-nav ml-auto">
	  <li class="nav-item">
	<a class="nav-link" href="#produkty">Produkty</a>
</li>


<li class="nav-item">
	<a class="nav-link" href="#informacje">Informacje</a>
</li>


<li class="nav-item">
	<a class="nav-link" href="#kontakt">Kontakt</a>
</li>


<li class="nav-item">
	<a class="nav-link" href="#rabaty">Rabaty</a>
</li>

		
</ul>	
  </div>
</nav>
		
	
	<!--- End navigation --->
	

	<!--- Start header settings --->
<div class="landing">
  <div class="produkty-wrap">
	  <div class="produkty-inner">
	</div>
</div>

<div class="opis-01">
	<h1><center>Witaj na tymczasowej testowej stronie </center></h1>
	  <h3><center>Poznaj naszą ofertę</center></h3>
	<a class="btn btn-outline-light btn-lg" href="#informacje">oferta</a>
</div>
	<!--- End header settings --->

</div>
<!--- end produkty section --->


<!--- start informacje section --->
<div id="informacje" class="offset">

</div>
<!--- end informacje section --->


<!--- start kontakt section --->
<div id="kontakt" class="offset">

</div>
<!--- end kontakt section --->


<!--- start rabaty section --->
<div id="rabaty" class="offset">

</div>
<!--- end rabaty section --->



<!--- Script Source Files -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<!--- End of Script Source Files -->

</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,700&display=swap');

body{
overflow-x: hidden;
font-family: 'Lato', sans-serif;
color: #555555;  
}

/*--- Navigation ---*/
.navbar{
  text-transform: uppercase;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1rem;
  background: rgba(0, 0, 0, 0.6)!important;
}
.navbar-brand img{
  height: 3rem;
}
.navbar-nav li{
padding-right: .7rem;
}
.opis-01{
margin-top: 100px;
}
.navbar-dark .navbar-nav .nav-link{
color: darkkhaki;  
padding-top: .8rem;
}
.navbar-dark .navbar-nav .nav-link.active
.navbar-dark .navbar-nav .nav-link:hover{
color: mediumpurple;
}

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/

Z góry dziekuję za jakąkolwiek pomoc :)

komentarz 1 czerwca 2020 przez SzymczyQ Obywatel (1,780 p.)

Po uruchomieniu u Siebie twojej strony wszystko jest OK. Co masz w pliku "css/fixed.css"?

Podeślesz zdjęcie z twoim problemem?

1 odpowiedź

odpowiedź 1 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)

Spróbuj dodać do css

/* Nieodwiedzony link */
a:link {
  color: inherit!important;
  text-decoration: inherit!important;
}

/* Odwiedzony link */
a:visited {
  color: inherit!important;
  text-decoration: inherit!important;
}

/* Po najechaniu myszką */
a:hover {
  color: inherit!important;
  text-decoration: inherit!important;
}

/* "Kliknięty" link */
a:active {
  color: inherit!important;
  text-decoration: inherit!important;
}