How to get a nav to stack at a certain width-CodePudding

Im trying to get the nav to stack when the screen is at a min width of 767px.

I cant seem to get them to perfectly stack on top of each other. When i get it to that width the words just scrunch up.

This is what i have for code so far

html

 <header>
  
   <nav>
    <a href="/">Home</a> 
    <a href="winter.html">Winter</a> 
    <a href="spring.html">Spring</a> 
    <a href="summer.html">Summer</a> 
    <a href="autumn.html">Autumn</a> 
  </nav>
</header>

css

@media screen and (max-width: 767px){
  nav a{
    float: none;
    width: 100%;
  }

}

im not sure what im doing wrong but im trying to get it to look like this Content stacked up and centered when the screen is a certain width

CodePudding user response：

Try this!

body{
    margin: 0px;
    padding: 0px;
}

@media screen and (max-width: 767px){
    nav a{
        display: block;
        width: 100%;
    }
}

nav{
    width: 100%;
    background-color: black;
    box-sizing: border-box;
    text-align: center;
}

nav a{
    text-decoration: none;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
}

<header>
    <nav>
    <a href="/">Home</a> 
        <a href="winter.html">Winter</a> 
        <a href="spring.html">Spring</a> 
        <a href="summer.html">Summer</a> 
        <a href="autumn.html">Autumn</a> 
    </nav>
</header>

Thanks and best regards!

CodePudding user response：

Do the following

@media screen and (max-width: 767px){
    nav a{
        display: block;
        width: 100%;
    }
}

nav{
    width: 100%;
}

nav a{
    display: inline-block;
}

<header>
    <nav>
    <a href="/">Home</a> 
        <a href="winter.html">Winter</a> 
        <a href="spring.html">Spring</a> 
        <a href="summer.html">Summer</a> 
        <a href="autumn.html">Autumn</a> 
    </nav>
</header>

CodePudding user response：

You should use block display, rather than the default inline display for links.

@media screen and (max-width: 767px){
  nav a{
    display: block;
  }
}

CodePudding user response：

For screen size less than 767px change display to block for <a>.

@media screen and (max-width: 767px) {
  nav a {
    display: block;
    float: none;
    width: 100%;
  }
}

<header>
  <nav>
    <a href="/">Home</a>
    <a href="winter.html">Winter</a>
    <a href="spring.html">Spring</a>
    <a href="summer.html">Summer</a>
    <a href="autumn.html">Autumn</a>
  </nav>
</header>