Your CSS usage is a bit unclear without a running snippet provided with your question. However, here are some suggestions based on the information available:
- To center your logo, consider splitting your menus into two unordered lists.
- Utilize Bootstrap's spacing utility classes like mb-1 mb-md-2 for applying margins to elements like navbar-nav.
- When using media queries from Bootstrap, remember to prioritize min-width over max-width and start with smaller sizes before moving up.
- Instead of shrinking text for smaller screens, maintain the same size and adjust positioning as needed for better readability.
If you want two columns in the collapsed version of links, consider adding a spacer div (`.break`) between `navbar-collapse` items and setting their width to 50%.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde3fde2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140a140b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Insert your customized CSS here */
</style>
<nav class="navbar navbar-expand-md navbar-light sticky-top w-100">
<!-- Navbar structure goes here -->
</nav>
<section>
<div class="container">
<div class="row">
<div class="col vh-100">
<p class="text-center">
Center
</p>
</div>
</div>
</div>
</section>
Consider including a placeholder image sized correctly to match your logo for better visual representation (e.g., 120x40 pixels).