Salve, salve.
Estou com problemas para fixar um menu num website. Quando o conteúdo da página tem uma DIV com class bootstarp ROW, esta DIV sobrescreve o menu na hora da rolagem.
HTML:
<html>
<head>
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<main class="main-container">
<h4>
Scroll page down to see the HEADER fixed on top
</h4>
<header class="main-header">HEADER</header>
<div class="main-content">
<h4>MAIN CONTENT TITLE</h4>
<div class="row"><!-- if delete this DIV, works fine -->
<div class="col">
left col
</div>
<div class="col">
right col
</div>
</div><!-- row -->
</div><!-- main-content -->
<footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>
CSS
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{ height:50px; background:#aaa; border-color:red;}
.main-content{ min-height:1000px;}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
EXEMPLO: https://jsfiddle.net/WRobynson/qhdfbjmv/10/
Alguém tem uma ideia pra ajudar?
Obrigado.