Question 43285 in Html Question posted in
Some basic documentation can be found here.

Why isn't my navbar working with html/css?

im new to using html/css. When clicking on "logga in" or "registrera" it’s working for transfering me to a new page. But the whole navbar doesn’t work at all. I don’t know whats wrong as I made another site yesterday where the navbar did work. Can anyone please help me to detect whats wrong??

This is my html:

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <link rel="stylesheet" type="text/css" href="viktigovning.css">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">

    <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com" rel="stylesheet"> 
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,600&display=swap" rel="stylesheet">

</head>
<body>


    <header>
        <a href="#" class="logo"><i class="fa-solid fa-house"></i> <span>Logo</span></a>

        <ul class="navbar">
        <li><a href="omoss.html" class="active"></a>Hem</li>
        <li><a href="omoss.html"></a>Om oss</li>
        <li><a href="#"></a>Skötselråd</li>
        <li><a href="#"></a>Bilder</li>
        <li><a href="#"></a>Kontakta oss</li>
        </ul>
        
        <div class="main">
        <a href="omoss.html" class="user"><i class="fa-regular fa-user"></i>Logga in</a>
        <a href="#">Registrera</a>
        </div>
    </header> 
</body>
</html>

This is my css:
enter image description here
enter image description here

Tags:

2

Answers


  1. 0

    Try using a BASE tag which tells the browser the home address from where all relative URLs originate…

    <head>

  <base href="https://thisplace.com/" target="_blank">

</head>
    Login or Signup to reply.
  2. 0

    You are closing anchor tag before text

    It should be like this

    <ul class="navbar">
        <li><a href="omoss.html" class="active">Hem</a></li>
        <li><a href="omoss.html">Om oss</a></li>
        <li><a href="#">Skötselråd</a></li>
        <li><a href="#">Bilder</a></li>
        <li><a href="#">Kontakta oss</a></li>
        </ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search