Greetings! I am not a native English speaker, so please excuse any typos in my message.
I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http://getbootstrap.com/components/
I have built a navbar and fixed it to the top, but it is overlapping with other elements on the page. Initially, I resolved this by adding a few
items. However, when I introduced a floating menu, the issue resurfaced. I have included some images for reference https://i.sstatic.net/MT95V.png
https://i.sstatic.net/NDWv5.png
I have tried using CSS and added body{padding-top: 30px;} but unfortunately, it did not work as intended. While it did create some space, the problem persisted when interacting with the float menu.
<div class="navbar navbar-expand-md fixed-top border">
<a href="#" class="navbar-brand ml-3">
LOGO
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ExampleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="ExampleNavbar">
<ul class="navbar-nav">
<a href="#" class="nav-item nav-link ml-3" style="font-size: x-large;">Home</a>
<a href="#" class="nav-item nav-link ml-3" style="font-size: x-large;">News</a>
<a href="#" class="nav-item nav-link ml-3 " style="font-size: x-large;">Home</a>
</ul>
</div>
<div class="collapse navbar-collapse" id="ExampleNavbar">
<ul class="navbar-nav ml-auto mr-3">
<a href="" class="nav-item nav-link ml-3" data-toggle="modal" data-target="#login"
style="font-size: x-large;"><i class="fas fa-sign-in-alt"></i>
Login</a>
<a href="" class="nav-item nav-link ml-3" data-toggle="modal" data-target="#register"
style="font-size: x-large;"><i class="fas fa-user-plus"></i>
Register</a>
</ul>
</div>
</div>
I would greatly appreciate your assistance!