This is the code I use for my website's navigation:
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="/">
<img width="150" height="60" src="/image-files/logo-gerard.svg" alt="Gerard">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li>...</li>
</ul>
</div>
</div>
</nav>
Additionally, this is how I have styled it with CSS:
body{
padding-top: 70px;
}
Although this setup works perfectly on desktops, I encountered an issue on my iPhone (using Safari), where the navigation bar overlaps the content. It seems that the body padding-top from the CSS is not being applied correctly as no changes are observed regardless of the value I set.
If anyone has any insights on what might be causing this problem or if there is a workaround, I would greatly appreciate your input!
You can view the live example here: