How do I create a earlier breakpoint in my bootstrap nav-bar?

[nakbar11]

I have try to overwrite it but I feel as though something is ot right... here is the code I used.

@media (max-width: 949px) {

.navbar-header {

    float: none;

}

.navbar-left,.navbar-right {

    float: none !important;

}

.navbar-toggle {

    display: block;

}

.navbar-collapse {

    border-top: 1px solid transparent;

    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-fixed-top {

    top: 0;

    border-width: 0 0 1px;

}

.navbar-collapse.collapse {

    display: none!important;

}

.navbar-nav {

    float: none!important;

    margin-top: 7.5px;

}

.navbar-nav>li {

    float: none;

}

.navbar-nav>li>a {

    padding-top: 10px;

    padding-bottom: 10px;

}

.collapse.in{

    display:block !important;

}

}

[Nancy OShea]

A URL to your work online and a description of exactly what you want to do would be more helpful than incomplete code snippets.   We need to see what you're doing in context.

I will  say this about Bootstrap's navbar though.  Too many links are a problem.  It's works best with a few top level page links.   If you need more than that, consider using a 2nd navigation system with pills, tabs or drop-downs.

Bootstrap Tabs and Pills

[nakbar11]

Sorry let me clarify, I am just starting a project there is no link yet.

Starting with Dreamweaver bootstrap nav-bar. This is a responsive site.  I don't like that the defult menu breakes to the a simpler hamburger menu,  when you get to the screen size for phones. I want it to break ealier at the tablet size... It's cleaner and better navigation for smaller screens less confusing for the user.... I know you can overide the original boostrap code with a custom code in css, just not sure if I'm useing the right code. If anyone has done this any insights you may have would be helpfull as I new to this and teaching myself as I go along.

Thank you

[osgood_]

nakbar11  wrote

I don't like that the defult menu breakes to the a simpler hamburger menu,  when you get to the screen size for phones. I want it to break ealier at the tablet size...

The burger shows (mobile first) in smartphone and tablet by default and then disapears when the screen reaches 1200px (desktop), so Im not following your logic.

I see you attempting to mix max-width and min-width media queries which might be confusing. As far as I know Bootstrap uses min-width throughout for its media queries so I would stick to its logic if you must use the framework or better still teach youself some code and break free of Bootstrap it will bring you down and hamper your progress. Look at things like Flexbox, a much simpler approach.

[Nancy OShea]

See screenshot.  When you create your new Bootstrap document, hit Customize button and establish your custom break points as shown.

Keep in mind, most tablets have Hi-Pixel Density screens.  Unless you're testing on a real device, don't underestimate how much screen real estate modern tablets have.  They are essentially the new laptops.   A vertically stacked menu might look out of place.

Nancy

[osgood_]

If you are talking about the classic default Bootstrap navbar then you will have to overide the default media query break points for the below css selectors from 1200px to 1500px or however wide you need it to be.

You would create a custom.css stylesheet and link the page to in AFTER the link to the default Bootstrap css. Insert the new css in that and leave the default Bootstrap styling alone.

<link rel="stylesheet" href="css/bootstrap_custom.css">

@media (min-width: 1500px) {

.navbar-header {

float: left;

}

}

@media (min-width: 1500px) {

.navbar-toggle {

display: none;

}

}

@media (min-width: 1500px) {

.navbar-nav {

float: left;

margin: 0;

}

.navbar-nav > li {

float: left;

}

.navbar-nav > li > a {

padding-top: 15px;

padding-bottom: 15px;

}

}

@media (min-width: 1500px) {

.navbar-collapse {

width: auto;

border-top: 0;

-webkit-box-shadow: none;

box-shadow: none;

}

.navbar-collapse.collapse {

display: block !important;

height: auto !important;

padding-bottom: 0;

overflow: visible !important;

}

.navbar-collapse.in {

overflow-y: visible;

}

.navbar-fixed-top .navbar-collapse,

.navbar-static-top .navbar-collapse,

.navbar-fixed-bottom .navbar-collapse {

padding-right: 0;

padding-left: 0;

}

}

However having said that it appears that you may be using too many top-level navigation items if you need to show the mobile navigation icon before the default setting.

[BenPleysier]

There is nothing wrong with the code that you have show, although I would have left a space between 'none' and '!important'

Have you cleared the browser cache before testing?