At the top of my website I have included a standard, fixed-top bootstrap navbar and have not added any other CSS on top of the bootstrap default. Even with this I find that when shrinking the window to mobile (below 767px) the styling goes crappy. A margin is added at the top and bottom of the buttons and as you go smaller the about button on the right goes completely out of alignment. Does anyone know a fix for this. I have tried just going and tweaking the css to fix the problem but with no success.
Here is the code for the navbar:
<?php
$pg = pathinfo($_SERVER['PHP_SELF'], PATHINFO_FILENAME);
if ($pg == "index") {
$navbarposition = "navbar-fixed-bottom";
} else {
$navbarposition = "navbar-fixed-top";
}
echo "<body>";
echo "<nav class='navbar navbar-default " . $navbarposition . " navbar-inverse' role='navigation'>"
?>
<ul class="nav navbar-nav">
<li id="about" <?php if($pg == 'about'){echo 'class="active"';} ?> ><a href="about.php">About</a></li>
<li id="staff" <?php if($pg == 'staff'){echo 'class="active"';} ?> ><a href="staff.php">Staff</a></li>
<li id="contact" <?php if($pg == 'contact'){echo 'class="active"';} ?> ><a href="contact.php">Contact</a></li>
<li id="calendar" <?php if($pg == 'calendar'){echo 'class="active"';} ?> ><a href="calendar.php">Calendar</a></li>
</ul>
</nav>
</body>
Thanks
Kabeer
