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

Home Forums Material Design for Bootstrap Support Fixing nav-item spacing with media queries

This topic contains 2 replies, has 2 voices, and was last updated by  leopoldus11 4 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
Version: MDB 4.0.2
  • Author
    Posts
  • #13223

    leopoldus11
    Participant

    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.

    #13256

    Marta Szymanska
    Participant

    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

    #13258

    leopoldus11
    Participant

    Hi,

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

    Thx once again!

    Best
    Leo

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.