How to determine width on responsive scroll menu

发布于 2020-03-30 21:16:17

I'm using this tutorial to build scrolling menu once the screen size is smaller.

I also want to add border with width element, but once I define width the scrolling: auto; element is override. My target is creating border with width and still keep the scrolling auto element working once the screen is minimized.

Codepen with width defined

Codepen with undefined width

.scrollmenu-container{
  margin: 0 auto;
  width: 500px;
  border-bottom: 2px solid #eee;
}
div.scrollmenu {
  text-align: center;
  margin: 0 auto;
  overflow: auto;
  white-space: nowrap;
  border-bottom: 2px solid #eee;
}

div.scrollmenu a {
  display: inline-block;
  color: grey;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  color: #24d175;
}

        <div class="scrollmenu-container">
          <div class="scrollmenu">
              <a>הכל</a>
              <a>USB</a>
              <a>מטענים</a>
              <a>מתאמים</a>
              <a>גדאג'טים למחשב'</a>
          </div>
        </div>

How can I define width for border without override scrolling auto element?

Questioner

Yotam Dahan

Viewed

Chinese

Original

.scrollmenu-container{ margin: 0 auto; width: 500px; border-bottom: 2px solid #eee; } div.scrollmenu { text-align: center; margin: 0 auto; white-space: nowrap; border-bottom: 2px solid #eee; } div.scrollmenu a { display: inline-block; color: grey; text-align: center; padding: 14px; text-decoration: none; } div.scrollmenu a:hover { color: #24d175; } @media (max-width:767px){ div.scrollmenu{max-width:300px; overflow-X: scroll;} }

<div class="scrollmenu-container"> <div class="scrollmenu"> <a>הכל</a> <a>USB</a> <a>מטענים</a> <a>מתאמים</a> <a>גדאג'טים למחשב'</a> </div> </div>

How to determine width on responsive scroll menu

Related issues