I have tried various solutions to the issue at hand, but nothing seems to be working. I applied padding-top to the container of my main content, but when I add the following CSS:
@media (max-width: 768px) {
body{
padding: 0;
}
}
it overrides the padding and hides the top portion of the page on both mobile and computer browsers.
Here is a snippet of my current HTML code:
<div id="navWrap">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
(HTML code continues...)
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
Despite adding custom classes, the issue persists. If you need to see any specific CSS, please let me know.
My goal is to achieve a dropdown behavior similar to this example:
http://jsfiddle.net/J7jJh/1/show/
In this example, clicking a dropdown item pushes the content of the page downwards.
(Note: The link provided above is not my own creation)
EDIT: This issue only occurs when viewing the page on mobile devices, particularly in landscape mode. Everything functions smoothly on a desktop computer.