.topbar { background: url("../Images/nav_back.jpg") top center/cover no-repeat fixed; align-content: center; } .oi { width: 3rem; font-size: 1.7rem; top: -2px; } .btn_wrap { display: flex; flex-direction: column; justify-content: space-evenly; height: 150px; } .bar{ display: flex; } .nav-item { height: 150px; display: flex; flex-direction: column; justify-content: center; transition: transform .2s; } .nav-item:hover { transform: scale(1.1); } .topbar_itemimg { height: 4rem; } .img_wrap { display: flex; flex-direction: column; width: 80%; margin-top: 5%; position: absolute; left: 75%; transform: translate(-50%, 0); } .nav-image { width: 30%; } .topbar_item { display: flex; flex-direction: column; justify-content: center; align-items: center; } .navbar { background-color: transparent; overflow: visible; position: static; height: 150px; } nav-link { height: 300%; } .topbar_content { width: 100%; display: flex; justify-content: space-between; align-items: center; } button { width: 11rem; text-decoration: none; text-align: center; color: white; cursor: pointer; background: url('Images/btn1.png') center center/contain no-repeat; background-size: 100% 100%; font-family: SilkscreenNormal; line-height: 26px; padding-top: 6px; font-family: Minecraft; } button:hover { background: url('Images/btn2.png')center center/contain no-repeat; background-size: 100% 100%; } .nav-item { font-size: 1.1rem; padding-bottom: 0.5rem; font-family: Minecraft; } .nav-item:first-of-type { padding-top: 1rem; } .nav-item:last-of-type { padding-bottom: 1rem; } .nav-item ::deep a { color: #d7d7d7; border-radius: 4px; height: 3rem; display: flex; align-items: center; line-height: 3rem; } .nav-item ::deep a.active { background-color: rgba(255,255,255,0.25); color: white; } .nav-item ::deep a:hover { background-color: rgba(255,255,255,0.1); color: white; } @media (min-width: 800px) { .navbar-toggler { display: none; } .collapse { /* Never collapse the sidebar for wide screens */ display: block; } }