CODEWITHSUNDEEP
htmlcsslisthtml-lists
Jay
Jay

Reputation: 161

Unordered horizontal list switching to vertical on mobile

I have an unordered vertical list as a navigation bar that is changing to a horizontal list on mobile devices. How do I prevent the list from switching to vertical and stay horizontal within the div element it's in.

Side note: the resulting code snippet is showing the list as vertical, but I suspect it's because the window is being perceived as mobile given it's width

Edit: there also appears to be a small scrollable gap to the right of the screen on mobile.

body {
    background-color: #E5E5E5;
}

#nav_bar {
    background-color: #2F2F2F;
    height: 60px;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#nav_logo {
    background-image: url('../img/nav_logo.png');
    width: 250px;
    height: 40px;
    top: 15%;
    left: 10%;
    position: absolute;
}

@media (max-width: 629px) {
    div#nav_logo {
      background-image: url('../img/nav_logo_mobile.png');
      width: 60px;
      height: 39px;
    }
}

ul.nav {
    list-style-type: none;
    left: 70%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

li.nav {
    float: left;
}

li.nav a {
    font-family: 'Roboto Condensed', sans-serif;
    display: block;
    color: white;
    text-align: center;
    padding: 18px;
    text-decoration: none;
}

li.nav a:hover {
    text-decoration: underline;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed|Oswald|PT+Sans" rel="stylesheet">


  </head>

  <body>

    <div id="nav_bar">

      <div id="nav_logo"></div>

      <ul class="nav">
        <li class="nav"><a href="index.html">HOME</a></li>
        <li class="nav"><a href="contact.html">CONTACT</a></li>
        <li class="nav"><a href="about.html">ABOUT</a></li>
      </ul>

    </div>
  </body>
</html>

Upvotes: 0

Views: 1043

Answers (2)

zukye
zukye

Reputation: 56

I think the problem is with "left: 70%". On mobile devices the space is just not enough to keep the links in a line.

Give them more space on small screens. I would recommend to set the right value instead of left, btw. On small screens you could just set it to right: 0.

Upvotes: 1

Paulstam
Paulstam

Reputation: 1

I found some code on w3schools and tried to implement it in your code. This is what I came up with:

ul.nav {
  position: relative;
  overflow: hidden;
  background-color: #333;
}

li.nav {
    float: left;
}

li.nav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Upvotes: 0

Related Questions