Navbar Question

Jun 11, 2015 at 5:04 PM
I want to make the global navigation (navbar) collapse to the hamburger anytime the width of the page drops to 1024 or below.

How would I accomplish that?

I have tired several things and just can't get it to do what I want.

I'm using SharePoint 2013 Beta V1.0.2

Thanks
Coordinator
Jun 19, 2015 at 7:10 PM
Edited Jun 19, 2015 at 7:11 PM
Hi

There are two steps required to make this work.

The first is overriding some of the OOTB B3 css. There is a nav button that is visible on mobile, but then hidden with the following CSS at 768+
@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}
In your custom CSS, you can change this behavior to show the mobile nav button up through 992 pixels with:
@media (min-width: 768px) {
    .navbar-toggle {
        display: block;
    }
}

@media (min-width: 992px) {
    .navbar-toggle {
        display: none;
    }
}
Next, up, the navigation itself is forced to always show at 768+ with the following CSS.
@media (min-width: 768px) {
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
}
You can make sure that the top nav will follow the collapse guidelines up through 922 with:
@media (min-width: 768px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .navbar-collapse.collapse {
        display: block !important;
    }
}
That is the first primary step. Now the second step is easier but will require you to move CSS around. The CSS provided in this project changes the styleing applied to the top nav at 768. If you look in the last media query found in bootstrap-custom.css, you will find a block of CSS surrounded in the comments:
/*top nav*/
...
/*end top nav*/
You need to move this entire CSS block to a new media query.
@media (min-width: 992px) {
    /*top nav*/
    /*because of the nested nature of OOTB top nav, we must treat the first element differently*/
    #topnavbar {
        height: auto;
    }
    ..
    /*end top nav*/
}
Once this is all said and done, to get this to work, I changed lines 339 onward in bootstrap-custom.css to the following:
/*responsive*/
@media (min-width: 768px) {
    /*fix ribbon back to normal*/
    #suiteBar {
        display: table-row;
        height: 30px;
    }
    #suiteBarLeft, #suiteBarRight {
        display: table-cell;
        width: 100%;
    }
    #suiteBarRight {
        width: auto;
    }
    #suiteBarRight .ms-core-deltaSuiteBarRight {
        float: none;
    }
    /*end ribbon*/
    
    /*search box*/
    .header .searchbox {
        display: block;
        float: right;
        clear: none;
    }
    /*end search box*/
    
    /*left nav */
    #sideNavBox {
        float: none;
        margin: 0px;
        width: auto;
    }
    #sideNavBox.col-md-3 {
        float: left;
        width: 25%;
    }
    /*end left nav */
}
/*end responsive*/




@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .navbar-toggle {
        display: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
    }
}



@media (min-width: 992px) {
    /*top nav*/
    /*because of the nested nature of OOTB top nav, we must treat the first element differently*/
    #topnavbar {
        height: auto;
    }
    #topnavbar .nav-collapse {
        margin-top: 0px;
    }
    /*reset back to inline for normal view*/
    #topnavbar .ms-core-listMenu-horizontalBox {
        display: block;
    }
    #topnavbar .nav ul.static {
        display: inline-block;
    }
    #topnavbar .nav li.static {
        display: inline-block;
        width: auto;
    }
    #topnavbar .nav li.static > .menu-item {
        display: inline-block;
        height: 49px;
        padding: 15px 10px 15px 0px;
    }
    /*hide or provide padding for downdown arrow*/
    #topnavbar .ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
        padding-right: 20px;
        width: auto;
        display: inline;
    }
    /*show the edit nav link again for larger devices*/
    #topnavbar .nav ul.root > li.ms-navedit-editArea {
        display: inline-block;
    }
    #topnavbar .nav .ms-navedit-editLinksText {
        height: 47px;
        line-height: 1em;
        padding: 15px 0 15px 10px;
        display: block;
    }
    /*we need to override where SP is placing dynamic nav items*/
    #topnavbar .nav ul.static > li.dynamic-children > ul.dynamic {
        position: absolute !important;
        top: 49px !important;
        left: 0 !important;
    }
    #topnavbar ul.dynamic > li {
        min-width: 150px;
        position: relative;
        white-space: nowrap;
    }
    #topnavbar ul.dynamic > li:first-child {
        border-top: 0px transparent none;
    }
    #topnavbar .nav li.dynamic-children.hover > ul.dynamic {
        display: block !important;
    }
    #topnavbar li.dynamic > .menu-item {
        height: 34px;
        line-height: 1em;
        margin: 0;
        padding: 9px 15px;
    }
    #topnavbar .ms-core-listMenu-horizontalBox .dynamic-children.additional-background {
        background-image: url("/_layouts/15/images/menu-down.gif");
    }
    #topnavbar .ms-core-listMenu-horizontalBox .dynamic .dynamic-children.additional-background {
        background-image: url("/_layouts/15/images/menu-right.gif");
    }
    /*3rd level +*/
    #topnavbar .nav ul.dynamic > li.dynamic-children > ul {
        position: absolute !important;
        top: 0px !important;
        left: 100% !important;
    }
    /*end top nav*/
}
I hope this helps. Eric