<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container dad" style="width: 100%; padding: 0;"> <div class="row" style="float: right;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="grow vertical-tab-1"> <p class="tab-title">1</p> <p class="rotate">Home</p> </div> <div class="grow vertical-tab-2"> <p class="tab-title">2</p> <p class="rotate">About</p> </div> <div class="grow vertical-tab-3"> <p class="tab-title">3</p> <p class="rotate">Projects</p> </div> <div class="grow vertical-tab-4"> <p class="tab-title">4</p> <p class="rotate">Contact</p> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,100,300,600,700); .dad { background: url("https://bufiles.blob.core.windows.net/co3613/vertical_menu/5.jpg"); } .grow { padding: 5px 5px 5px 5px; height: 100vh; width: 20vh; float: left; position: relative; transition: width 0.5s; -webkit-transition: width 0.5s; text-align: left; overflow: hidden; } .grow:hover { height: 100vh; width: 50vh; text-align: left; } .tab-title { font-size: 2.5em; color: #fcfcfc; text-transform: uppercase; font-family: 'Josefin Sans', sans-serif; font-weight: 400; } .vertical-tab-1 { background: url("https://bufiles.blob.core.windows.net/co3613/vertical_menu/7.jpg") center center no-repeat; } .vertical-tab-2 { background: url("https://bufiles.blob.core.windows.net/co3613/vertical_menu/8.jpg") center center; } .vertical-tab-3 { background: url("https://bufiles.blob.core.windows.net/co3613/vertical_menu/4.jpg") center center; } .vertical-tab-4 { background: url("https://bufiles.blob.core.windows.net/co3613/vertical_menu/9.jpg") center center; } .rotate { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); margin-top: 50vh; font-family: 'Josefin Sans', sans-serif; font-weight: 400; color: #fff; font-size: 2.25em; text-transform: uppercase; } @media screen and (max-width: 970px) { .rotate { font-size: 1.5em; } } @media screen and (max-width: 970px) { .tab-title { font-size: 1.6em; } } @media screen and (max-width: 767px) { .rotate { font-size: 1.125em; } } @media screen and (max-width: 767px) { .tab-title { font-size: 1.25em; } } @media screen and (max-width: 500px) { .rotate { font-size: 0.6em; } } @media screen and (max-width: 500px) { .tab-title { font-size: 0.75em; } }