CODEWITHSUNDEEP
htmlcss
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1616

How to make side-nav stick to top-left when full-height is exceeded?

I want my side-nav is scrollable when its height exceeded(550px).I made it always centered vertically.But when screen height is less than 550px,I can scroll but not compeletely.Because it should have margin a little bit from top.

Here you can see enter image description here

Two of those icons on the top aren't visible and reachable.

After 550px height,I tried to give top margin in terms of vh but didnt work.

 @media only screen and (max-height: 550px) {
    .menu {
        margin-top:30vh;
    }
  }

I need to calculate this top dynamically but how?I wish I could use calc() function but as I know its only for width and height responsive calculations. 

*,*::after,*::before{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    font-size:62,5%;
    background-color: #000	;
}
body{
    box-sizing: border-box;
} 
.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

.responsive {
    max-width: 100%;
    height: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .imgContainer{
    overflow: hidden;
    border: 4px solid yellow;
  }
  .menu{
    margin: 0;
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 5px;
    background-color:#fff;
    padding:10px; 
    height: auto;
    width: fit-content;
  }
  .myIcon{
      margin-bottom:20px;
      font-size:40px;
      color:#000;
      display: block;
  }
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
            <link rel="stylesheet" href="css/icon-font.css">
            <link rel="stylesheet" href="/styles.css">
            <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
            <link rel="shortcut icon" type="image/png" href="img/favicon.png">
                    </head>
        <body>   

                <div class="menu" >
                    <a href=""><i class="ion-crop myIcon"></i></a>
                    <a href=""><i class="ion-android-color-palette myIcon"></i></a>
                    <a href=""><i class="ion-android-contract myIcon"></i></a>
                    <a href=""><i class="ion-android-options myIcon"></i></a>
                    <a href=""><i class="ion-android-sync myIcon"></i></a>
                    <a href=""><i class="ion-contrast myIcon"></i></a>
                    <a href=""><i class="ion-ios-analytics myIcon"></i></a>
                    <a href=""><i class="ion-ios-color-wand myIcon"></i></a>
                </div>
                    <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive">
    </body>
    </html>

Upvotes: 0

Views: 35

Answers (2)

Rene van der Lende
Rene van der Lende

Reputation: 5281

Using your initial code and adding max-height: 100vh; overflow: auto to .menu {} will do the trick, answering your question. Cleaner code is better, I prefer Mahatmasamatman's answer...

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-size: 62, 5%;
  background-color: #000;
}

body {
  box-sizing: border-box;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.responsive {
  max-width: 100%;
  height: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.imgContainer {
  overflow: hidden;
  border: 4px solid yellow;
}

.menu {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  border-radius: 5px;
  background-color: #fff;
  padding: 10px;
  height: auto;
  width: fit-content;
  max-height: 100vh; /* ADDED */
  overflow: auto; /* ADDED */
}

.myIcon {
  margin-bottom: 20px;
  font-size: 40px;
  color: #000;
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
  <link rel="stylesheet" href="css/icon-font.css">
  <link rel="stylesheet" href="/styles.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
  <link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>

<body>

  <div class="menu">
    <a href=""><i class="ion-crop myIcon"></i></a>
    <a href=""><i class="ion-android-color-palette myIcon"></i></a>
    <a href=""><i class="ion-android-contract myIcon"></i></a>
    <a href=""><i class="ion-android-options myIcon"></i></a>
    <a href=""><i class="ion-android-sync myIcon"></i></a>
    <a href=""><i class="ion-contrast myIcon"></i></a>
    <a href=""><i class="ion-ios-analytics myIcon"></i></a>
    <a href=""><i class="ion-ios-color-wand myIcon"></i></a>
  </div>
  <img src="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Nature" class="responsive">
</body>

</html>

Upvotes: 1

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

Change you menu css to not be positioned absolutely. This way when you scroll you will scroll the sidebar menu when the menu height exceeds the screen height.

.menu{
    margin: 0;
    border-radius: 5px;
    background-color:#fff;
    padding:10px; 
    height: auto;
    width: fit-content;
  }

Upvotes: 1

Related Questions