Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Fixing nav-item spacing with media queries

MDB SupportFixing nav-item spacing with media queries
leopoldus11 Pro User asked 10 months ago

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.

For example:
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.

2 Answers
Marta Szymanska answered 9 months ago

Hello,

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.

Best,
Marta

leopoldus11 Pro User answered 9 months ago

Hi,

thx again Marta.
I’ll have a look into the minimized Bootstrap file.

Thx once again!

Best
Leo