My header moves when changing the page, tell me how to fix it

Question

My header moves when changing the page, tell me how to fix it

51 Views Asked by Artur Chub At 02 July 2023 at 20:43

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title> 
    <style>
    body{
    background-color: white;
}
*{
    padding: 0;
    margin: 0;
}

.h2body{
    text-align: center;
    margin: 1px;
    color: white;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}

    header{
    
    color: white;
    background-color: rgb(128, 96, 101);
}
ul{
    margin-left: 350px;
    list-style: none;
    display: flex;
    justify-content: center;
}
ul a{
    text-decoration: none;
    margin: 20px;
    color: white;
    font-weight: 500;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav ul a:hover{
    border-bottom: 1px solid white;
}
nav{
    display: flex;
    justify-content: center;
}
.cart{
    margin-left: 250px;
    display: flex;
}
.cart section{
    margin-top: 8px;
}
    </style>

</head>
<body>
    <header>
        <a href="index.html" class="h2body"><p>CLL</p></a>

        <nav>
            <ul>
                <a href="./index.html"><li class="linav">Home</li></a>
                <a href="../about/about.html"><li class="linav">About</li></a> 
                <a href="../contacts/Contacts.html"><li class="linav">Contacts</li></a>
                <a href="../contacts/Contacts.html"><li class="linav">Products</li></a>
                
            </ul>
            <div class="cart">
            <a href=""><img src="icons8-cart-32.png" alt="go to cart"></a> <section>(0)</section>
        </div>
        </nav>
    </body>
</html>

My header moves when changing the page, tell me how to fix it!

I tried giving the header position: fixed value, but that didn't help. I want that when changing pages, the header did not change the location by a couple of pixels, please help. in particular, the title and the sheet are shifted by 17 pixels! Thanks in advance.

Original Q&A

There are 1 best solutions below

**Md. Rakibul Islam** · Answer 1 · 2023-07-02T21:55:34.190000

I fixed one issue. When you hover over the links it will not increase the header height anymore.

The change I had made here is:

ul a{
    border-bottom: 1px solid transparent;
    /* So that it can occupy that 1px initially and will not increase the height on hover */
}

And for the top link clickablility issue:

I changed the display of the a tag to inline-block so that it doesn't take the whole block and for positioning I had to add a container with flex display and had to add a fixed height. Here are the list of changes:

.h2body{display: inline-block;}

.h2body-container{
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

And in the html markup you can see the a container with "h2body-container" class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title> 
    <style>
    body{
    background-color: white;
}
*{
    padding: 0;
    margin: 0;
}

.h2body-container{
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h2body{
    text-align: center;
    margin: 1px;
    color: white;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: inline-block;
}

    header{
    
    color: white;
    background-color: rgb(128, 96, 101);
}
ul{
    margin-left: 350px;
    list-style: none;
    display: flex;
    justify-content: center;
}
ul a{
    text-decoration: none;
    margin: 20px;
    color: white;
    font-weight: 500;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;   
    border-bottom: 1px solid transparent;
}
nav ul a:hover{
    border-bottom: 1px solid white;
}
nav{
    display: flex;
    justify-content: center;
}
.cart{
    margin-left: 250px;
    display: flex;
}
.cart section{
    margin-top: 8px;
}
    </style>

</head>
<body>
    <header>
        <div class="h2body-container"><a href="index.html" class="h2body"><p>CLL</a></div>

        <nav>
            <ul>
                <a href="./index.html"><li class="linav">Home</li></a>
                <a href="../about/about.html"><li class="linav">About</li></a> 
                <a href="../contacts/Contacts.html"><li class="linav">Contacts</li></a>
                <a href="../contacts/Contacts.html"><li class="linav">Products</li></a>
                
            </ul>
            <div class="cart">
            <a href=""><img src="icons8-cart-32.png" alt="go to cart"></a> <section>(0)</section>
        </div>
        </nav>
    </body>
</html>

My header moves when changing the page, tell me how to fix it

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in HEADER

Related Questions in HEAD

Trending Questions

Popular # Hahtags

Popular Questions