Я использую bootstrap 4 и хочу разместить фигуру под своими навигационными ссылками, а также под моими социальными ссылками. Идея состоит в том, чтобы ссылки были скрыты за пределами экрана с помощью только небольшой вкладки с надписью «меню» и «социальные сети», а когда вы наводите курсор мыши на вкладку, выскакивают значки полного меню или социальных сетей, но все, что я пытаюсь, влияет напозиционирование всего остального на экране. Вот как все выглядит в настоящее время , чтобы вы могли видеть, о чем я говорю. Есть идеи?
.bg {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(255,255,255,0.7);
background-blend-mode: lighten;
}
#lgLogo {
opacity: .7;
padding-bottom: 5%;
border-left: dotted thick #f77f00;
}
.navlinks {
display: flex;
text-align: center;
justify-content: center;
padding: 0;
margin: 0;
font-family: platelet;
font-size: 125%;
font-weight: 600;
transform: rotate(90deg);
}
.navlinks li {
display: flex;
align-content: stretch;
justify-content: space-evenly;
width: 80%;
flex: 1 0 auto;
list-style-type: none;
transform: rotate(-90deg);
}
#yvmain {
display: inline;
font-family: platelet;
font-size: 250%;
padding: 20% 1% 1% 1%;
font-weight: bolder;
color: #4f4f4f;
border: ridge thick #4f4f4f;
opacity: .7;
}
#ocmain {
display: inline;
font-family: platelet;
font-size: 425%;
padding: 1% 1% 1% 40%;
background: #4f4f4f;
background-clip:content-box;
font-weight: lighter;
color: #f77f00;
border: ridge thick #4f4f4f;
opacity: .7;
}
.navlinks a:hover img {
transform: rotate(0deg);
float: right;
opacity: 0;
}
.navlinks a{
align-content: center;
justify-content: center;
text-decoration: none;
color: #f77f00;
}
.navlinks a span {
background: #4f4f4f;
background-blend-mode: lighten;
padding: 2%;
opacity: 0;
}
.navlinks a:hover {
display: inline;
float: left;
text-decoration: none;
transition: all 0.5s ease-in-out;
}
.navlinks a:hover span {
color: #f77f00;
display: block;
float: left;
padding: 5% 7%;
border-right: solid thick #f77f00;
opacity: .7;
transition: all 0.5s ease-in-out;
}
#this {
display: inline;
float: left;
}
.activetext {
background: #b0b0b0;
display: block;
float: left;
padding: 6% 8%;
border-left: solid thick #4f4f4f;
opacity: .7;
}
.activelogo {
float: right;
opacity: 0;
}
.menulogo {
float: left;
opacity: .7;
transform: rotate(-90deg);
}
.social {
width: 50%;
float: right;
opacity: .7;
transform: rotate(90deg);
}
.social:hover {
transform: rotate(0deg);
opacity: 1;
transition: all 0.5s ease-in-out;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="_css/body.css">
<link href="https://use.typekit.net/zxa6xyn.css" rel="stylesheet">
<title>Temple Creative | Designing Your Visual Identity</title>
</head>
<body background="images/background.jpg" class="bg" style="height: 100vh">
<div class="row d-flex flex-row" style="height: 100vh">
<div class="col-2 my-auto drawer">
<ul class="navlinks">
<li class="my-auto this" id="this"><img src="images/homelogo.png" alt="homelogo" class="activelogo" style="width: 25%"><span class="activetext">home</span></li>
<li><a href="about.html"><img src="images/aboutlogo.png" alt="aboutlogo" class="menulogo" style="width: 25%"><span class="navlinkitem">aBout</span></a></li>
<li><a href="services.html"><img src="images/servlogo.png" alt="servlogo" class="menulogo" style="width: 25%"><span class="navlinkitem">services</span></a></li>
<li><a href="portfolio.html"><img src="images/portlogo.png" alt="portlogo" class="menulogo" style="width: 25%"><span class="navlinkitem">Portfolio</span></a></li>
<li><a href="contact.html"><img src="images/contactlogo.png" alt="contactlogo" class="menulogo" style="width: 25%"><span class="navlinkitem">contact</span></a></li>
</ul>
</div>
<div class="col mx-auto my-auto" data-tilt-full-page-listening data-tilt data-tilt-reverse="true" style="transform-style:preserve-3d;transform:perspective(1000px)">
<section class="col d-flex flex-column">
<h1 id="yvmain" class="align-self-baseline" translateZ(200px) data-tilt-reverse="false">your vision</h1>
</section>
<section class="col d-flex flex-column">
<img src="images/largelogo.png" alt="mainLogo" id="lgLogo" class="image-fluid mx-auto my-auto" width="60%" data-tilt-full-page-listening data-tilt data-tilt-reverse="false">
</section>
<section class="col d-flex flex-column">
<h1 id="ocmain" class="align-self-end" translateZ(200px) data-tilt-reverse="true">our creativity</h1>
</section>
<script src="_scripts/vanilla-tilt.js"></script>
</div>
<div class="d-flex flex-column col-2 my-auto">
<a href="http://www.facebook.com/templecreative" target="_blank"><img src="images/fbLogo-01.png" alt="facebook" id="facebook" class="social image-fluid"></a>
<a href="http://www.instagram.com/temple.creative" target="_blank"><img src="images/igLogo-01.png" alt="instagram" id="instagram" class="social image-fluid"></a>
</div>
</div>
<!--Javascript-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>