in mobile view when you click to show navs menu
you will find menu (yellow part) in bottom not under logo
you can test in https://jsfiddle.net/rcn2hyu0/
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body class="body ar"><style>
.mobile-show{ position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1070; height:100%; }
</style>
<script>
const mobileScreen = window.matchMedia("(max-width: 990px )");
$(document).ready(function () {
$(".navbar-toggler").click(function () {
if (mobileScreen.matches) $(".logger").toggleClass("mobile-show"); else $(".logger").toggleClass("mobile-show");
});
});
</script>
<nav class="navbar navbar-expand-lg bg-navbar ">
<div style="background-color:#FFF;" class="container-xl logger">
<a class="p-1" style="display:inline-block;vertical-align:middle;" href="https://skhr.com/"> <img style="height:50px;" src="2_files/logo.png"> </a>
<button class="navbar-toggler px-2 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">x</button>
<div style="background-color: yellow;" id="navbarCollapse" class="navbar-collapse text-start collapse">
<div style="padding:0;" class="navbar-nav col header_colors">
<a class="nav-item nav-link" href="#" aria-current="page">home</a><div class="bdivider"></div>
<a class="nav-item nav-link" href="#" aria-current="page">media</a><div class="bdivider"></div>
</div>
</div>
</div>
</nav>
<div class="container-fluid p-0">
<section style="background-image:url(/images/bg2.svg);background-repeat:repeat;background-position:center center;" class="section home-hero wf-section ">
<div class="home-hero text-center">
</div>
</section> <div style="max-width:1200px; " class="container-xl">
<div class="row">
<div class=""><h1>Welcome back Jim</h1></div>
<p>Your account type is: Administrator</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
test example
thanks
please can help to solve this
New contributor
Jimmy Jhon is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.