Fixing nav-item spacing with media queries
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.
Thx for the help in advance.
This problem is Bootstrap issue not MDB, that’s why you can’t find right selector to change in MDB CSS files. If you want to change this you shoud look for css selector in Bootstrap files.
Please login or Register to submit your answer