I've created a custom navbar that fits perfectly on a screen that is 1300 pixels wide by 700 pixels high.
https://i.sstatic.net/nOm0c.png
However, when the viewport size is reduced, the navbar elements become misaligned:
https://i.sstatic.net/zBqpQ.png
I've experimented with various Bootstrap classes and tried using a media query in my CSS to address the issue, but nothing seems to work:
@media only screen and (max-width: 700px) {
.navbar .app-badge {
display: block !important;
}
}
Despite my efforts, I have been unable to make the navbar collapse properly on smaller viewports. Here is the HTML code for my navbar:
<nav class="navbar navbar-expand-sm navbar-spur
{% if not current_user.admin %}navbar-spur-user {% else %} navbar-spur-admin {% endif %}">
<!-- Navbar HTML code goes here -->
</nav>
Below is the CSS code I've used for styling the navbar:
/* CSS code for the navbar styling */
/* Base styles for navbar */
.navbar-spur, .navbar-spur .navbar-brand .navbar-nav {
background-image: none;
background-repeat: no-repeat;
}
/* User specific styles */
.navbar-spur-user, .navbar-spur-user .navbar-brand .navbar-nav {
background-color: #003274 !important;
}
If you have any suggestions, helpful resources, or feedback on how to fix the navbar collapse issue, please let me know. Your assistance is greatly appreciated. Thank you!