Topic: Fixing nav-item spacing with media queries

leopoldus11 pro asked 6 years 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.

leopoldus11 pro answered 6 years ago

Hi, thx again Marta. I'll have a look into the minimized Bootstrap file. Thx once again! Best Leo

Marta Wierzbicka staff answered 6 years 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

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No