How to get the navbar to the bottom?-CodePudding

I'm new to the CSS and so confused about it! Please tell me what am I doing wrong here and teach me what I should know!

here is the preview-

This is the html and css code-

index.html-

<section >
        <img  src="./Assets/Asset [email protected]" width="320" alt="Brand Icon">
        <p >Luxury Jewelry Store</p>
    
    <nav >
            <a href="#" >Home</a>
            <a href="#" >My Cart</a>
            <a href="#" >My Orders</a>
            <a href="#" >FAQs</a>
            <a href="#" >About Us</a>
        <div >
                <i ></i>
                <input  placeholder="Search..." type="search">
                <input type="submit" value="Search" >
                
        </div>
    </nav>
    </section>

styles.css-

.section-1{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.navbar{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
}

I am trying to get the navbar to the bottom of the page. I think I'm getting confused in flex. I tried adding

justify-self:center;

but then I found out that it doesn't work in flex. So what I should do now in this case?

And also how can I make navbar stick to the top when I scroll down?

CodePudding user response：

You can position the navbar to the bottom of the page by using align-items: flex-end instead of align-items: center. This will align the elements to the end of the container, which in this case is the bottom.

To make the navbar stick to the top when you scroll down, you can add position: fixed and top: 0 to the CSS for the navbar class:

.navbar{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
    position: fixed;
    top: 0;
}

This will make the navbar fixed to the top of the viewport, even when you scroll down.

CodePudding user response：

You can fix your problem by using position: absolute.

First, you give the relative position to the section tag so that the navbar is positioned based on it. Then you give position: absolute and bottom: 0 to navbar.

like this:

.section-1{
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.navbar{
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
}

If you want, you can achieve this result by using display: flex. You should do this:

CSS:

.section-1 {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.navbar {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
}

HTML:

<section >
    <div>
        <img  src="./Assets/Asset [email protected]" width="320" alt="Brand Icon">
        <p >Luxury Jewelry Store</p>
    </div>

    <nav >
            <a href="#" >Home</a>
            <a href="#" >My Cart</a>
            <a href="#" >My Orders</a>
            <a href="#" >FAQs</a>
            <a href="#" >About Us</a>
        <div >
                <i ></i>
                <input  placeholder="Search..." type="search">
                <input type="submit" value="Search" >
                
        </div>
    </nav>
    </section>

But the point is that the first DIV sticks to the top of the page.