Menubar doesn't scale to screen size

Question

I got one line menubar at the very top of the screen.
However, it seems not fitting to the size of the monitor.

body {
  background: #5A452E;
}

.menuWrapper {
  display: flex;
  margin: 0;
  padding: 0;
  z-index: 10;
  border-bottom: 1.5px solid white;
  height: 80px;
  background: transparent;
  align-items: flex-start;
}

.menuWrapper>* {
  display: flex;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Source Serif Pro', serif;
}

.menuWrapper .mainMenu {
  width: 43vw;
  min-width: 600px;
  max-width: 50vw;
}

.mainMenu ul,
.loginArea .loginMenu ul {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  vertical-align: middle;
}

.mainMenu ul li {
  align-self: flex-start;
  list-style: none;
  text-align: center;
  padding: 38px;
  line-height: 1px;
}

.mainMenu a {
  text-decoration: none;
  color: white;
  transition: all 0.5s linear;
}

.mainMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}

.logoArea {
  width: 10%;
  min-width: 130px;
  height: 100%;
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
}

.logoArea img {
  width: 80px;
  height: 60px;
  margin: auto;
  display: block;
}

.loginArea {
  width: 45vw;
}

.loginArea .infoArea {
  width: 60%;
  min-width: 400px;
}

.loginArea .loginMenu {
  width: 40%;
  min-width: 200px;
  float: right;
  text-align: right;
}

.loginArea .loginMenu ul {
  display: flex;
  justify-content: flex-end;
}

.loginArea .loginMenu ul li {
  list-style-type: none;
  text-align: center;
  padding: 38px 15px;
  line-height: 1px;
}

.loginArea .loginMenu ul li a {
  text-decoration: none;
  color: white;
  transition: all 0.5s linear;
}

.loginArea .loginMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap" rel="stylesheet">
<div class="menuWrapper">
  <div class="mainMenu">
    <ul>
      <li><a href="#">STORE</a></li>
      <li><a href="#">CLASS</a></li>
      <li><a href="#">CAFE</a></li>
      <li><a href="#">PLAY GROUND</a></li>
    </ul>
  </div>
  <div class="logoArea">
    <img src="../resources/images/img_common/logo-lahol2.png">
  </div>
  <div class="loginArea">
    <div class="infoArea">

    </div>
    <div class="loginMenu">
      <ul>
        <li><a href="#">SIGN IN</a></li>
        <li><a href="#">SIGN UP</a></li>
      </ul>
    </div>
  </div>
</div>

score 0 · Answer 1 · answered Mar 24 '21 at 11:10

Man(or Girl),
Your code is a complete mess(not really). You didn't follow the common rules, which is the main reason of your problem.

First of all, you didn't use any css reset(ask google 'bout this). Well, many people don't use reset but it's important for cross browser-y things.

Second, you used vw in width, while it's not a problem, many people avoid using it in responsive web design. Try to use 'percentages' based calculations in fluid layout, instead of vw.

Third, you messed a bit with flex, I can't explain what mess, but please consider studying more about flex, it's very important in responsive web design. CSS-tricks is a good resource for explanation.

Anyway, while I couldn't completely solve your problem, I have found a solution - overflow. Take a look -

* {
  box-sizing: border-box;
}
body {
  background: #5A452E;
}

.menuWrapper {  
  display: flex;
  margin: 0;
  padding: 0;
  z-index: 10;
  height: 80px;
  text-align: center;
  box-sizing: border-box;
  font-family: 'Source Serif Pro', serif;
  border-bottom: 1.5px solid white;
  background: transparent;
/*   align-items: flex-start; */
}

/* .menuWrapper>* {
} */

/*.menuWrapper - don't do this unless there are multiple .mainMemu, it only complicates the code, nothing more. Browser will catch .mainMeu anyway. Only add .menuWrapper for readability purpose. */
.mainMenu { /* PART 1 */
  width: 43vw;
  min-width: 600px;
  max-width: 50vw;
}

.mainMenu ul,
.loginArea .loginMenu ul {
  padding: 0;
  margin: 0;
  display: flex;
/*   align-items: flex-start; */
/*   vertical-align: middle; */
}

.mainMenu ul li {
  align-self: flex-start;
  list-style: none;
  text-align: center;
  padding: 38px;
  line-height: 1px;
}

.mainMenu a {
  text-decoration: none;
  color: white;
/*   transition: all 0.5s linear; - this line is useless. Hovering will work anyway in a:hover state, not here. Don't try to do this when hovering something. */
}

.mainMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}

.logoArea { /* PART 2 */
/*   height: 100%; - no impact at all. Every element has a height of 100%, by default */
  width: 10%;
/*   min-width: 130px; Consider removing this. After commenting out this line, the overflown width reduced a bit, LOL*/
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
}

.logoArea img {
  width: 80px;
  height: 60px;
  margin: auto;
  display: block;
}

.loginArea { /* PART 3 */
  width: 45vw; 
  overflow: hidden; /* I added a overflow here */
}

.loginArea .infoArea {
  width: 60%;
  min-width: 400px;
}

.loginArea .loginMenu {
  width: 40%;
  min-width: 200px;
  float: right;
  text-align: right;
}

.loginArea .loginMenu ul {
  display: flex;
  justify-content: flex-end;
}

.loginArea .loginMenu ul li {
  list-style-type: none;
  text-align: center;
  padding: 38px 15px;
  line-height: 1px;
}

.loginArea .loginMenu ul li a /* well, a long line of selector here I see. If you have time, take a look here: https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left/5813672#5813672 */
{
  text-decoration: none;
  color: white;
/*   transition: all 0.5s linear; */
}

.loginArea .loginMenu a:hover {
  color: #F3D798;
  transition: all 0.5s linear;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@300;400;600&display=swap" rel="stylesheet">

<div class="menuWrapper">
  
  <div class="mainMenu">
    <ul>
      <li><a href="#">STORE</a></li>
      <li><a href="#">CLASS</a></li>
      <li><a href="#">CAFE</a></li>
      <li><a href="#">PLAY GROUND</a></li>
    </ul>
  </div>
  
  <div class="logoArea">
    <img src="../resources/images/img_common/logo-lahol2.png">
  </div>
  
  <div class="loginArea">
    <div class="infoArea">
    </div>
    <div class="loginMenu">
      <ul>
        <li><a href="#">SIGN IN</a></li>
        <li><a href="#">SIGN UP</a></li>
      </ul>
    </div>
  </div>
</div>

Now, the problem with overflow: hidden is, when you shrink your screen too much, the .loginArea disappear; not really, because of overflow's hidden property, it makes the .loginArea hidden.

But at least, it solves our problem - horizontal scrolling, right?

Just add a @media query after 880px. That's the breakpoint of your design, because when you shrink more after 880px, .loginArea got hidden. Using media query will pull everything vertically, essentially for mobile & tablet view.

I tried to add the @media query but because of your mess, I was having a hard time to make everything working. Never mind.

Menubar doesn't scale to screen size

1 Answers1