How to make NavBar Resize with window-CodePudding

I am trying to make my website's navbar resize when the window is resized. My current code works fine until a point where the window width is too small and the navbar becomes two rows and looks bad. This is my code for the main part of my website.

What I would like it to do is switch from a horizontal navbar to a vertical navbar when the width is too small for everything (this would be mostly for mobile users) and I am not sure how to do that.

I would also like to make the navbar sticky and have tried some tutorials but cannot seem to get any to work on this website.

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght@300&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<title>
    Web_Title
</title>
<head>
<body>
<header>
    <div >
        <img src="src" alt = "logo" class = "logo" width="150" height="50">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Video Archive</a></li>
            <li><a href="#">Text Archive</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>
</body>
</head>
</html>

My code for the css is below:

body {

    margin: 0;
    background: #222;
    font-family: 'Flamenco', cursive;
    font-weight: 900;

}


header {
    background: #ffffff
}


header::after{
    content:'';
    display:table;
    clear: both;
}

.logo{
    float:left;
    padding: 0px 0;
}

nav{
    float: left;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 15px;

    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    font-size: 18px;

}
nav a:hover{
    color: rgb(20, 20, 38);
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    background-color: #444;

    position: absolute;
    top:0;
    width: 0%;

    transition: all ease-in-out 250ms;
}



nav a:hover::before{
    width: 100%;

}

CodePudding user response：

You can use @media in CSS to do this

body {

    margin: 0;
    background: #222;
    font-family: 'Flamenco', cursive;
    font-weight: 900;

}


header {
    background: #ffffff
}


header::after{
    content:'';
    display:table;
    clear: both;
}

.logo{
    float:left;
    padding: 0px 0;
    width: 180px;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 70px;
    padding-top: 15px;

    position: relative;
}

nav a {
    color: #444;
    text-decoration: none;
    font-size: 18px;

}
nav a:hover{
    color: rgb(20, 20, 38);
}

nav a::before{
    content: '';
    display: block;
    height: 5px;
    background-color: #444;

    position: absolute;
    top:0;
    width: 0%;

    transition: all ease-in-out 250ms;
}



nav a:hover::before{
    width: 100%;
}



nav{
    float: left;
}

@media only screen and (max-width: 400px) { /* smaller screen*/
  .logo {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght@300&display=swap" rel="stylesheet">
<title>
    Web_Title
</title>
<head>
<body>
<header>
    <div >
        <img src="src" alt = "logo" class = "logo">
    </div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Video Archive</a></li>
            <li><a href="#">Text Archive</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
</header>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus magna et commodo faucibus. Ut viverra efficitur orci ut efficitur. Donec porta neque ac pretium lobortis. Maecenas gravida non tellus nec maximus. Pellentesque magna urna, rhoncus in lectus id, varius aliquet sapien. Maecenas augue purus, eleifend quis sagittis in, rhoncus sit amet dolor. Etiam sed quam sit amet tortor suscipit efficitur id eu ex. Ut eu odio hendrerit, eleifend massa in, malesuada quam. Duis cursus non est quis pretium. Sed tempus arcu sit amet erat aliquet, nec tincidunt lorem feugiat. Nunc nec ipsum consequat, maximus dolor sed, tempus risus. Aenean aliquet sem quis purus euismod, at sodales velit ullamcorper.

Pellentesque accumsan suscipit sem, ac ullamcorper libero cursus pretium. Aenean semper sodales tortor a finibus. Maecenas sit amet egestas tortor. Etiam molestie imperdiet maximus. Maecenas a lacus est. Pellentesque purus orci, rutrum ut vehicula at, fringilla eget ligula. Donec sem velit, commodo eu tincidunt id, accumsan sed leo.

Quisque at risus sit amet urna efficitur bibendum. Aliquam eu sagittis erat. Fusce finibus orci at nulla rutrum, quis laoreet purus congue. Aliquam aliquam fermentum erat vitae luctus. Sed vitae lacus finibus, lacinia risus quis, molestie eros. Vestibulum ullamcorper, lacus sit amet eleifend commodo, est tellus aliquam ante, et hendrerit ante velit sed libero. Praesent aliquet nisi semper pharetra suscipit. Aliquam fermentum a turpis eu congue. Integer nec arcu sed tellus dapibus pretium. Proin posuere urna turpis, volutpat sollicitudin sem sollicitudin eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Ut pharetra molestie nisl vitae feugiat. Nulla accumsan vulputate sagittis. Sed quis erat dictum, tempor leo nec, posuere velit. Duis consectetur metus sit amet odio bibendum egestas sed id arcu. Maecenas vehicula, justo non condimentum vestibulum, elit justo pharetra sapien, nec fermentum diam lorem ac felis. Morbi ut sem leo. Nunc ac ante quam. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tempus ex velit, varius fringilla nisi semper ut. Etiam sed eleifend augue, ut mattis eros. Sed sodales libero ex, et molestie velit pellentesque nec. Morbi ac ligula quis dui dapibus ornare. Duis at est non nibh scelerisque cursus vel in massa. Suspendisse pretium, mi quis cursus varius, ipsum enim suscipit nibh, non sollicitudin est odio vitae est. Quisque bibendum vehicula nibh, vel accumsan purus lacinia eu.

Duis vel feugiat dolor, non dignissim arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis eget nibh et interdum. Aliquam erat volutpat. Quisque tempus justo augue, vitae pharetra magna ultrices ut. Quisque id scelerisque felis. Pellentesque sed elementum enim. Duis elementum sem sed neque malesuada, nec consectetur nulla finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum massa eget arcu pharetra vulputate. Sed id nisl ac turpis tempus hendrerit ut in ligula. Ut imperdiet porta mauris, vitae fringilla augue auctor vel.
</p>
</body>
</head>
</html>

The @media CSS rule only adds the styling to the page if the rules in place are met. @media max-width: 400px only adds the styling if the width is under 400px wide.

Sticky positioning usually has issues like this and there are usually no fixes. You can probably use fixed position and add lots of padding to the top of the page so content doesn't get lost under the navbar.

I used Lorem Ipsum to simulate content so you can play around with fixed positioning.

CodePudding user response：

I have noticed that you are using float to have your logo on the right and nav on the left and I advise you to use float because it make it easier when the screen is resizing.

Your code would be like:

header {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

The justify-content attribute will allow you to specify how the content inside header is going to be distributed and align-items: center allows you to align items center vertically.

The Vertical Navbar issue

Here you can use media queries to handle the problem. If you do not know what media quires are it is a way to run css code for a specific width range of the device screen e.g for mobile only.

To implement this lets say for widht range below 400px see the example below:

@media (min-width){
   /* specify your code here */
   /* this is assuming you coded for mobile first*/ 
}

@media (max-width){
   /* specify your code here*/
   / this is assuming you coded for desktop first*/
}

CodePudding user response：

I recommend looking into Media Queries.

W3School tutorial for Media Queries

With @media, you can make changes to the styling when screen size changes. These are called breakpoints. You can for example say max-width, which applies when screen width is less than given amount and min-width, which applies when screen size is bigger than given amount.

For example, when screen size changes, we are changing the background color of the body:

/* This applies when screen size is more than 600px */
@media screen and (min-width: 600px) {
  body {
    background-color: red;
  }
}


/* This only applies when screen size is less than 600px */
@media screen and (max-width: 600px) {
  body {
    background-color: yellow;
  }
}


/* This only applies when screen size is less than 400px */
@media screen and (max-width: 400px) {
  body {
    background-color: green;
  }
}

<h1>Change the size of the screen to see the effect</h1>

If you need help applying it to your code I will gladly help, but give it a try first =)