Making top navigation bar fixed when its position is set as relative
Question
How do I make this top navigation bar fixed on top?
I understand that normally, you'd apply position: fixed to boxA, but that doesn't work in this case because its position has to be set as relative. The entire top navigation bar is to be sticky, so it stays on the page as people scroll down
.boxA:after { content:""; display: block; clear: both; } .boxA { height: 90px; position: relative; border-bottom: 1px solid #E0DCDC; } .boxA img { position: absolute; top: 50%; left: 3%; transform: translate(0, -50%); } .box2 ul { position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; } .box1 { float: left; width: auto; } .box2 { float: right; width: auto; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 li a { display: block; padding: 0px 50px; color: inherit; text-decoration: none; font-size: 12px; } .box2 li a:hover { text-decoration: underline; } .box2 ul:after { content: ""; display: block; clear: both; } .box2 li { float: left; width: auto; font-family: 'Gotham'; letter-spacing: 2.5px; } .box1 img { position: absolute; height: 20px; }
<div class="boxA"> <div class="box1"> <div class="site"> <a href=""><img src="https://via.placeholder.com/140x100"></a> </div> </div> <div class="box2"> <nav class="menu"> <ul> <li><a href="#conD">menu1</a></li> <li><a href="#conG">menu2</a></li> <li><a href="#conH">menu3</a></li> <li><a href="#conI">menu4</a></li> </ul> </nav> </div> </div>
I tried adding div class="top-nav" right above div class="boxA" , and assign .top nav's position as fixed, but that didn't work.
1 answers
solution1
1 2020-10-03 05:38:36
Add height to your body for better understanding. Add position fixed and top 0 and width 100% to your boxA class
body { height: 900px; } .boxA:after { content:""; display: block; clear: both; } .boxA { height: 90px; position: fixed; border-bottom: 1px solid #E0DCDC; top: 0; width: 100%; background: #fff; -webkit-box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08); box-shadow: 0 4px 6px 0 rgba(12, 0, 46, .08); } .body_part { margin-top: 100px; } .boxA img { position: absolute; top: 50%; left: 3%; transform: translate(0, -50%); } .box2 ul { position: absolute; top: 50%; transform: translate(0, -50%); right: 10px; } .box1 { float: left; width: auto; } .box2 { float: right; width: auto; } .box2 ul { margin: 0; padding: 0; list-style: none; } .box2 li a { display: block; padding: 0px 50px; color: inherit; text-decoration: none; font-size: 12px; } .box2 li a:hover { text-decoration: underline; } .box2 ul:after { content: ""; display: block; clear: both; } .box2 li { float: left; width: auto; font-family: 'Gotham'; letter-spacing: 2.5px; } .box1 img { position: absolute; height: 20px; }
<body> <div class="boxA"> <div class="box1"> <div class="site"> <a href=""><img src="https://via.placeholder.com/140x100"></a> </div> </div> <div class="box2"> <nav class="menu"> <ul> <li><a href="#conD">menu1</a></li> <li><a href="#conG">menu2</a></li> <li><a href="#conH">menu3</a></li> <li><a href="#conI">menu4</a></li> </ul> </nav> </div> </div> <div class="body_part"> <img src = "https://via.placeholder.com/350x150"> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML Element set to Relative Position covers Top Navigation bar set to Fixed
Navigation bar shrinks when position is set to fixed
How to set a navigation header with fixed position at the top
Styling cards are going over the top of my top Nav bar when making position fixed
Position: fixed on the navigation bar but my footer is stacking on top of it when I click the open navigation button
Dropdown menu not working properly in navigation bar when said navigation bar is set to position:fixed;
Responsive navigation bar with fixed position when scrolling
Fixed position navigation bar
Navigation bar doesn't get fixed when using position:fixed
Remove horizontal spacing when using position:relative in navigation bar
Related Tags