问题描述:

By default Bootstrap collapses a nav menu when the viewport gets narrower than 768px. Because of the width of my menu items I need to to collapse a little sooner, around the 786 mark, otherwise at a width of between 767 and 786 I get a stacked menu item, which is a bit ugly.

I've tried adding the following media query to a custom stylesheet:

@media (max-width: 786px) {

.navbar-default .navbar-nav .open .dropdown-menu > li > a {

color: #f6fbfb;

}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {

color: #d7f1cf;

}

.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {

color: #d7f1cf;

background-color: #95c58e;

}

}

However the style still seems to be coming from bootstrap.min.css which is making it collapse at 767.

Website is at www.eamonngormley.com

How can I force the issue and get it to pick up my custom media query? Or should I be putting in a different media query?

Thanks!

网友答案:

You can force the styles to be used using !important. Change the code to this

@media (max-width: 786px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #f6fbfb !important;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #d7f1cf !important;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #d7f1cf !important;
        background-color: #95c58e !important;
    }
}

This should force the styling to be used because !important overrides any other CSS declaration.

网友答案:

You can use http://getbootstrap.com/customize to change the point at which your navbar collapses. The section you're looking for is here: http://getbootstrap.com/customize/#grid-system

Find the @grid-float-breakpoint field and change it to the pixel width at which you want the navbar to collapse/uncollapse. In this case, you can use 786px if that's what you want. Or, you can use the built in sizes like @screen-md.

Then, scroll to the bottom and click the compile and download button. This will download your customized copy of Bootstrap, which you can then use to replace the copy of Bootstrap in your theme.

相关阅读:
Top