LopLop88
08.11.2020, 21:29
Mit Links
Website?

Hallo

Ich habe direkt 2 Fragen:

  1. Wieso ist um diese Navbar ein weisser Balken?
  2. Wenn ich über die Links(in der Navbar) hovere wird nur ein kleiner Hintergrund helleres blau. Jedoch möchte ich das von der Höhe die ganze Navbar helleres Blau wird. Wie kann ich dass machen?

Bei Fragen melden. Vielen Dank im Voraus

Lg Luca

CSS:
body{
    font-family:sans-serif;
    font-size: 16px;
}


/* Navbar */
.topnav {
    background-color: #1E262D;
    overflow: hidden;
  }


/* Logo Navbar */
.logonav{
    width: 20%;
    height: 20%;
    min-width: 120px ;
    min-height: 91px;
}
  
  /* Links */
  .topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    margin-top: 2%;
    margin-bottom: 2%;
  }


  /* Links Hover */
  .topnav a:hover {
    background-color: #2C3E50;
    background-size: 100%;
  }
  
  .topnav .icon {
    display: none;
  }


  /* Media Queries  */
@media screen and (max-width: 600px) {
    .topnav a:not(.child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
      background-color: #1E262D;
      color: #ddd;
    }
  }
  
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
      background-color: #1E262D;
      color: #ddd;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }








HTML:
<!DOCTYPE html>
<html lang="en">


<!--Head-->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="java.js"></script>
  </head>
<body>


<div class="topnav" id="myTopnav">
  <!--<img src="logoblue.png" alt="logo" class="logonav">-->
  <a href="contact.html">Contact</a>
  <a href="portfolio.html">Portfolio</a>
  <a href="index.html" >About me</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>


  </body>
</html>
Computer, Internet, HTML, Webseite, Design, CSS
2 Antworten
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.