I’m bulding a website and implemented a fixed navbar. In the navbar I do have in total 10 nav links. 7 (1 Home + 6 Sections) nav items on the left of the navigation and 3 (Social icons for email, facebook, instagram) on the right side of the navigation.
However, I do get strange effects, when I test the navbar using Chrome’s developer tools.
When I minimize the width of the page to under 992px, all of a sudden the Home item (1st) has a padding on the left and the instagram icon (10th, last) has a padding on the right side.
This effect compresses all nav items, so that the last item on the left side of the navigation drops down a row.
It looks awful and I need to get it fixed.
I know that I have to fix this issues using the media queries.
I tried to look for how I can fix this problem by analyzing the media queries (min-width: 768px or max-width: 992px) in the mdb.css file (mdb.min.css).
But I just can’t seem to find the right css selector to change.