Question 263390 in Html Question posted in
Some basic documentation can be found here.

Html – Nav bar won't take up all of width on mobile

I have a nav bar which takes up all the width on desktop, but on mobile it doesn’t

HTML:

<ul>
      <li><#">Home</a></li>
      <li><#">Dev Log</a></li>
      <li><#">Credits</a></li>
      
    </ul>
  </nav>

CSS:

* {
  box-sizing: border-box;
}
  body, html {
  margin: 0 auto;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
  text-align: center;
}

nav{
  background-color: #0b4e2d;
  font-size:18px;
  padding:6px;
  margin: 0;
  width: 100vw;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
  color: white;
  margin-left: 15px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul a {
  color: white;
  text-decoration: none;
}

ul a:hover {
  text-decoration: underline;
}

I tried using 100% width and 100% vw on the nav and ul but it didn’t work. It seems to only happen when an element is under it

Tags:

2

Answers


  1. 0

    The problem with your CSS is that you are setting the width of the nav element to 100vw. This means that it will be the full width of the viewport, regardless of the device. However, on mobile devices, the viewport is often smaller than the screen. This is because the viewport includes the address bar and other UI elements.

    To fix this, you need to set the width of the nav element to 100% instead of 100vw. This will make it the full width of the screen, even on mobile devices.

    CSS
html, body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
  text-align: center;
}

nav {
  background-color: #0b4e2d;
  font-size: 18px;
  padding: 6px;
  margin: 0;
  width: 100%;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  position: relative;
  color: white;
  margin-left: 15px;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

ul a {
  color: white;
  text-decoration: none;
}

ul a:hover {
  text-decoration: underline;
}
    Login or Signup to reply.
  2. 0

    I can’t find anything wrong, but I have cleaned it up a bit.

    body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #7AE7C7;
}

nav {
  background-color: #0b4e2d;
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: white;
  padding: 10px;
}

nav a {
  padding: 10px;
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}
    <nav>
  <a href="#">Home</a>
  <a href="#">Dev Log</a>
  <a href="#">Credits</a>
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search