FlexBoxGrid2 issue with rows
Question
I`m doing one project using FlexBoxGrid2 and have an issue with rows. I need to add many rows one goes next by each other, but adding the second row I see that it is situated behid the first row, not under as I need it. Delete of "position: fixed;" in CSS for "header_container" helps to solve that, but I need first row (nav bar) to be fixed. Please advise if there is any solution for that as I completely stucked here. Thanks.
.header_container { max-width: 1124px; height: 72px; padding: 0 55px 0 55px; margin: 0 auto; background-color: #FFFFFF; position: fixed; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; box-shadow: 0px 0px 16px 0px #26262629; }.header_container:after { content: ""; display: table; clear: both; }.logo { float: left; width: 119.23px; height: 12.31px; padding: 20px 55px 20px 55px; } nav { float: right; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; }.btn { width: 78px; height: 40px; background-color: #FFFFFF; color: #1D1D1D; font-family: roboto; font-size: 13px; font-weight: 1000; text-align: center; border-radius: 2px; border: 1px solid #E0E0E0; margin-top: 16px; }.line { max-width: 80%; width: 956px; height: 1x; color: #757575; border-bottom: solid 1px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>ExamPro</title> <link rel="stylesheet" href="https.//unpkg.com/flexboxgrid2@7.2.1/flexboxgrid2 css"> </head> <body> <header> <div class="header_container"> <a href=""> <img src="" alt="logo" class="logo"/></a> <nav> <ul> <li><button class="btn">Войти</button></li> <li><a href=""> <img src="" alt="basket" class="basket"/></a> </ul> </nav> </div> </header> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> <div class="line">search</div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-12 col-lg-12"> </div> </div> </div> </body> </html>
2 answers
solution1
0 2022-07-21 13:33:49
So I found it, to solve issue above you need to change position: fixed; to position: sticky;and all works well.
solution2
0 2022-07-25 14:14:47
For now I found only one way to solve issue-to add more padding to the first row after navbar and stay position:fixed in this case.
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.