Home > Net >  Header moves with registration form to down
Header moves with registration form to down

Time：10-28

My register form moves with header, but I want to move only register form. When I try to make "margin-top: 20px" for "#signup" my form moves with header to down.So I neeed that my register form could move without any problems in down and that my header was unmovable, but I have no idea why happens what happens. I don't know what to add to my question, so guys I'll just some random text for my question to post it.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.navbar-custom {
    width: 100%;
    height: auto;
    background-color: #2BAE66FF;
    display: flex;
    justify-content: space-between;
    position:fixed;
}

.bookBrand {
    padding: 1em 0.5em;
    margin: 0;
    height: 100%;
    vertical-align: middle;
    float: right;
    font-size: 1.30em;
    font-weight: bolder;
    line-height: 48px;
}




.navbar-custom ul li {
    text-decoration: none;
    list-style: none;
    float: left;
    padding: 0.2em 0.5em;
    padding: 10px 30px;
    margin: 0 40px;
 
}

.navbar-custom ul li a {
        color: #ffffff;
        text-decoration: none;
        font-size: 1.2em;
}

.custom-brand {
    color: white;
}

.custom-brand:hover {
    color: white;
}

.navgation-custom {
 
}

.navgation-custom li {
    -webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.66);
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.66);
 }

.navgation-custom li:hover{
    background: #000;
}

@media (max-width: 600px) {
    nav .navbar-custom ul li{
        display: flex;
        flex-wrap: wrap;

    }

    .navbar-custom ul li {
        text-decoration: none;
        list-style: none;
        float: none;
        margin: 0 40px;
    }

    .left-links {
        padding: 2em 0.5em;
        margin: 0;
        height: 100%;
        vertical-align: middle;
        float: right;
        width: 15%;
    }

    .right-links {
        padding: 2em 0.5em;
        margin: 0;
        height: 100%;
        vertical-align: middle;
        float: right;
    }

    .bookBrand {
        padding: 1em 0.5em;
        margin: 0;
        width: 12%;
        height: 100%;
        vertical-align: middle;
        float: right;
        font-size: 1.30em;
        font-weight: bolder;
        line-height: 48px;
    }
}

@media screen and (max-width: 375px) {
    .bookBrand {
        width: 21%;
    }
}


/*Registration form design*/


#signup {
    padding: 0px 25px 25px;
    background: #fff;
    box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ), 0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
    position: static;
    margin-top: 20px;
}

        #signup .header h3 {
            color: #333333;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        #signup .header p {
            color: #8f8f8f;
            font-size: 14px;
            font-weight: 300;
        }

    #signup .sep {
        height: 1px;
        background: #e8e8e8;
        width: 406px;
        margin: 0px -25px;
    }

    #signup .inputs {
        margin-top: 25px;
    }

        #signup .inputs label {
            color: #8f8f8f;
            font-size: 12px;
            font-weight: 300;
            letter-spacing: 1px;
            margin-bottom: 7px;
            display: block;
        }

input::-webkit-input-placeholder {
    color: #b5b5b5;
}

input:-moz-placeholder {
    color: #b5b5b5;
}

#signup .inputs input[type=email], input[type=password],input[type=text], input[type=email] {
    background: #f5f5f5;
    font-size: 0.8rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: none;
    padding: 13px 10px;
    width: 330px;
    margin-bottom: 20px;
    box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
    clear: both;
}

    #signup .inputs input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=email]:focus{
        background: #fff;
        box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
        outline: none;
    }

#signup .inputs .checkboxy {
    display: block;
    position: static;
    height: 25px;
    margin-top: 10px;
    clear: both;
}

#signup .inputs input[type=checkbox] {
    float: left;
    margin-right: 10px;
    margin-top: 3px;
}

main {
    margin-top: 30px;
}

#signup .inputs label.terms {
    float: left;
    font-size: 14px;
    font-style: italic;
}

#signup .inputs {
    width: 100%;
    margin-top: 20px;
    padding: 15px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    background: -moz-linear-gradient( top, #b9c5dd 0%, #a4b0cb);
    background: -webkit-gradient( linear, left top, left bottom, from(#b9c5dd), to(#a4b0cb));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #737b8d;
    -moz-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
    box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
    text-shadow: 0px 1px 3px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
    display: table;
    position: static;
    clear: both;
}

    #signup .inputs .submit:hover {
        background: -moz-linear-gradient( top, #a4b0cb 0%, #b9c5dd);
        background: -webkit-gradient( linear, left top, left bottom, from(#a4b0cb), to(#b9c5dd));
    }



.vertical-center {
    width: 100px;
    height: 50px;
    background-color: #000;
    color: #fff;
}

.registerTittle {
    text-align: center;
}
<head>
    <title>BS - Registration</title>
    <link href="/css/site.css" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/img/favicon.png">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
    <header>
        <nav class="navbar-custom">
           <ul class="left-links">
               <li><a href="/">Home</a></li>
               <li><a href="#">Store</a></li>
           </ul>

           <ul class="bookBrand">
               <li><a href="/">BOOK STORE</a></li>
           </ul>
           

           <ul class="right-links">
               <li><a href="/Account/Login">Login</a></li>
               <li><a href="/Account/Register">Register</a></li>
           </ul>
        </nav>


    </header>
    <main>
        


    <link rel="stylesheet" href="/css/Registration.css">


    <div class="container">
        <form id="signup" method="post" action="/AccountController/Register">
            <h3 class="registerTitle">Registration</h3>
            <hr>
            
            <div class="form-group">
                <div><label for="Email">Email</label></div>
                <input placeholder="[email protected]" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="Email adress is bad or empty" id="Email" name="Email" value="">
                <span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
            </div>

            <div class="form-group">
                <div>
                    <label type="text" for="UserName">Username</label>
                </div>

                <input type="text" placeholder="Some_username" data-val="true" data-val-required="Username is empty or bad" id="UserName" name="UserName" value="">
                <span class="text-danger field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
            </div>

            <div class="form-group">
                <div><label for="Password">Password</label></div>
                <input placeholder="••••••" type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password">
                <span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            </div>

            <div class="form-group">
                <div><label for="ConfirmPassword">Confirm Password</label></div>
                <input placeholder="••••••" type="password" data-val="true" data-val-equalto="Password and confirmation password not match." data-val-equalto-other="*.Password" data-val-required="The Confirm Password field is required." id="ConfirmPassword" name="ConfirmPassword">
                <span class="text-danger field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
            </div>
            <div class="row">
                <div class="col-md"></div>
                <div class="col-md"><button type="submit" class="vertical-center">Register</button></div>
                <div class="col-md"></div>
            </div>
        <input name="__RequestVerificationToken" type="hidden" value="CfDJ8NAi7idwsjVPjlBOIkmpwZs1fUqHPBVwKHnmSkjL0b9fA2dlCjBQ4ILxbCnn-k3quiCAtUiE3DUWynzxYuk0Rvo2t_5r8IQJ98_LsVMF63JU5682qAE87YsOMPaxddfBUVTo-3io_for7Zt2xvmc5LM"></form>
    </div>
    </main>



    <footer>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
    <script src="/lib/jquery/dist/jquery.min.js"></script>

    
</body>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just make the position of your header position:sticky; and it's top:0;. It will fix everything.

* {
    margin: 0;
    padding: 0;
}
header{
position: sticky;
top:0;
width: 100wv;
}


.navbar-custom {
    height: auto;
    background-color: #2BAE66FF;
    display: flex;
    justify-content: space-between;
}

.bookBrand {
    padding: 1em 0.5em;
    margin: 0;
    height: 100%;
    vertical-align: middle;
    float: right;
    font-size: 1.30em;
    font-weight: bolder;
    line-height: 48px;
}




.navbar-custom ul li {
    text-decoration: none;
    list-style: none;
    float: left;
    padding: 0.2em 0.5em;
    padding: 10px 30px;
    margin: 0 40px;
 
}

.navbar-custom ul li a {
        color: #ffffff;
        text-decoration: none;
        font-size: 1.2em;
}

.custom-brand {
    color: white;
}

.custom-brand:hover {
    color: white;
}

.navgation-custom {
 
}

.navgation-custom li {
    -webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.66);
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.66);
 }

.navgation-custom li:hover{
    background: #000;
}

@media (max-width: 600px) {
    nav .navbar-custom ul li{
        display: flex;
        flex-wrap: wrap;

    }

    .navbar-custom ul li {
        text-decoration: none;
        list-style: none;
        float: none;
        margin: 0 40px;
    }

    .left-links {
        padding: 2em 0.5em;
        margin: 0;
        height: 100%;
        vertical-align: middle;
        float: right;
        width: 15%;
    }

    .right-links {
        padding: 2em 0.5em;
        margin: 0;
        height: 100%;
        vertical-align: middle;
        float: right;
    }

    .bookBrand {
        padding: 1em 0.5em;
        margin: 0;
        width: 12%;
        height: 100%;
        vertical-align: middle;
        float: right;
        font-size: 1.30em;
        font-weight: bolder;
        line-height: 48px;
    }
}

@media screen and (max-width: 375px) {
    .bookBrand {
        width: 21%;
    }
}


/*Registration form design*/


#signup {
    padding: 0px 25px 25px;
    background: #fff;
    box-shadow: 0px 0px 0px 5px rgba( 255,255,255,0.4 ), 0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
    position: static;
    margin-top: 20px;
}

        #signup .header h3 {
            color: #333333;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        #signup .header p {
            color: #8f8f8f;
            font-size: 14px;
            font-weight: 300;
        }

    #signup .sep {
        height: 1px;
        background: #e8e8e8;
        width: 406px;
        margin: 0px -25px;
    }

    #signup .inputs {
        margin-top: 25px;
    }

        #signup .inputs label {
            color: #8f8f8f;
            font-size: 12px;
            font-weight: 300;
            letter-spacing: 1px;
            margin-bottom: 7px;
            display: block;
        }

input::-webkit-input-placeholder {
    color: #b5b5b5;
}

input:-moz-placeholder {
    color: #b5b5b5;
}

#signup .inputs input[type=email], input[type=password],input[type=text], input[type=email] {
    background: #f5f5f5;
    font-size: 0.8rem;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: none;
    padding: 13px 10px;
    width: 330px;
    margin-bottom: 20px;
    box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
    clear: both;
}

    #signup .inputs input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=email]:focus{
        background: #fff;
        box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
        outline: none;
    }

#signup .inputs .checkboxy {
    display: block;
    position: static;
    height: 25px;
    margin-top: 10px;
    clear: both;
}

#signup .inputs input[type=checkbox] {
    float: left;
    margin-right: 10px;
    margin-top: 3px;
}

main {
    margin-top: 30px;
}

#signup .inputs label.terms {
    float: left;
    font-size: 14px;
    font-style: italic;
}

#signup .inputs {
    width: 100%;
    margin-top: 20px;
    padding: 15px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    background: -moz-linear-gradient( top, #b9c5dd 0%, #a4b0cb);
    background: -webkit-gradient( linear, left top, left bottom, from(#b9c5dd), to(#a4b0cb));
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #737b8d;
    -moz-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
    -webkit-box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
    box-shadow: 0px 5px 5px rgba(000,000,000,0.1), inset 0px 1px 0px rgba(255,255,255,0.5);
    text-shadow: 0px 1px 3px rgba(000,000,000,0.3), 0px 0px 0px rgba(255,255,255,0);
    display: table;
    position: static;
    clear: both;
}

    #signup .inputs .submit:hover {
        background: -moz-linear-gradient( top, #a4b0cb 0%, #b9c5dd);
        background: -webkit-gradient( linear, left top, left bottom, from(#a4b0cb), to(#b9c5dd));
    }



.vertical-center {
    width: 100px;
    height: 50px;
    background-color: #000;
    color: #fff;
}

.registerTittle {
    text-align: center;
}
<head>
    <title>BS - Registration</title>
    <link href="/css/site.css" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/img/favicon.png">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>

<body>
    <header>
        <nav class="navbar-custom">
           <ul class="left-links">
               <li><a href="/">Home</a></li>
               <li><a href="#">Store</a></li>
           </ul>

           <ul class="bookBrand">
               <li><a href="/">BOOK STORE</a></li>
           </ul>
           

           <ul class="right-links">
               <li><a href="/Account/Login">Login</a></li>
               <li><a href="/Account/Register">Register</a></li>
           </ul>
        </nav>


    </header>
    <main>
        


    <link rel="stylesheet" href="/css/Registration.css">


    <div class="container">
        <form id="signup" method="post" action="/AccountController/Register">
            <h3 class="registerTitle">Registration</h3>
            <hr>
            
            <div class="form-group">
                <div><label for="Email">Email</label></div>
                <input placeholder="[email protected]" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="Email adress is bad or empty" id="Email" name="Email" value="">
                <span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
            </div>

            <div class="form-group">
                <div>
                    <label type="text" for="UserName">Username</label>
                </div>

                <input type="text" placeholder="Some_username" data-val="true" data-val-required="Username is empty or bad" id="UserName" name="UserName" value="">
                <span class="text-danger field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
            </div>

            <div class="form-group">
                <div><label for="Password">Password</label></div>
                <input placeholder="••••••" type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password">
                <span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            </div>

            <div class="form-group">
                <div><label for="ConfirmPassword">Confirm Password</label></div>
                <input placeholder="••••••" type="password" data-val="true" data-val-equalto="Password and confirmation password not match." data-val-equalto-other="*.Password" data-val-required="The Confirm Password field is required." id="ConfirmPassword" name="ConfirmPassword">
                <span class="text-danger field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
            </div>
            <div class="row">
                <div class="col-md"></div>
                <div class="col-md"><button type="submit" class="vertical-center">Register</button></div>
                <div class="col-md"></div>
            </div>
        <input name="__RequestVerificationToken" type="hidden" value="CfDJ8NAi7idwsjVPjlBOIkmpwZs1fUqHPBVwKHnmSkjL0b9fA2dlCjBQ4ILxbCnn-k3quiCAtUiE3DUWynzxYuk0Rvo2t_5r8IQJ98_LsVMF63JU5682qAE87YsOMPaxddfBUVTo-3io_for7Zt2xvmc5LM"></form>
    </div>
    </main>



    <footer>
    </footer>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
    <script src="/lib/jquery/dist/jquery.min.js"></script>

    
</body>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Well, you were almost there :D But theres 2 ways

Answer 1

In .navbar-custom add this code to what you already have:

    z-index: 1030;
    left: 0;
    right: 0;
    top: 0;

So your .navbar-custom class will look like this:

.navbar-custom {
    width: 100%;
    height: auto;
    background-color: #2BAE66FF;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 1030;
    left: 0;
    right: 0;
    top: 0;
}

What have we done?

z-index - specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

top, left and right - The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

We are basically just moving .navbar-custon into the correct place after specifying the z-index

Additional things we can do:

Also create the class .container with margin-top: 200px; so that the registration form will clear the navbar at the top. (Purely for aesthetic purposes)

Answer 2

Alternatively, if you don't want the navbar above the registration form at all times, you can simply use position: sticky; with top: 0; as the other answer said, which will place the navbar above the reigistration form. On scroll, it will go out of view.

Code:

.navbar-custom {
    width: 100%;
    height: auto;
    background-color: #2BAE66FF;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
}

I hope this helps :D

Page link：https//www.codepudding.com/net/170074.html

Prev:Word-break at nth word in css
Next:Challenges with CSS to make a round button
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding