Jump to content


Photo
Crackbar

Changing CrackBar's navbar collapse threshold

crackbar navbar

  • Please log in to reply
2 replies to this topic

#1 paulhibbitts

paulhibbitts

    Member

  • Members
  • 10 posts
  • Country: Country Flag

Posted 31 May 2013 - 03:19 PM

Hi Nick,

I am a PageLines newbie, and I just purchased your CrackBar plugin - very useful!

I've got a fair number of items in the menubar, and when viewed on certain smaller screen sizes I get stacked menu items until eventually I get the collapsed menu. I'd prefer to have the collapsed menu appear earlier if possible.

I've tried to copy all of your media queries CSS into my custom code  area in PageLines, and changed the min and max width from 767 to 1000 but this does not seem to work as expected - the menu temporarily becomes totally expanded at a certain point. At the end of the message is all the code I copied and the changes I made.

Here is the site in question:
http://hibbittsdesig...s/cmpt-363-133/

Could you please point me in the right direction?

Thanks very much,
Paul

ps - I am also using the custom color options for CrackBar

 

 

// ************************************************************/
// * Responsive Handling
// ************************************************************/
@media (max-width: 400px) {

.crackbar .plbrand img{
    max-width: 210px;
}

}//-- End Media Query --//

@media (max-width: 600px) {

.crackbar.crackbar-content-width {
    width: 95%;
    margin:0 auto;
}

}//-- End Media Query --//


@media (max-width: 1000px){

    #site .bigcrack-menu-wrap {
        li.dropdown {
            .dropdown-menu {
                display: none;
            }

            &.open {
                .dropdown-menu {
                    display: block;
                    .transition(height 1s linear);

                    .bigcrack-menu-item-item {
                        color:@white;
                        color: rgba(255,255,255,0.8);
                    }
                }
            }
        }
    }

    body.crackbar_fixed {
        .page-canvas  {
          padding-top: 0;
        }
        .fixed_width #page .page-canvas{
            margin-top: 0;
        }
    }
    .section-crackbar{
        &.fixed-top {
            position: static;
            .crackbar-inner {
                padding: 5px;
            }
        }
    }

    #site .crackbar{

        .dropdown-submenu a:after {
            border-left-color:transparent;
        }

        .brand {
            padding-left: 10px;
            padding-right: 10px;
            margin: 0 0 0 -5px;
          }
        .searchform{
            float: none;
            padding: 10px;
            .box-sizing(border-box);
            width:100%;
            max-width:100%;

            .searchfield {
                height:30px;
                width:100%;
                .border-radius(5px);
            }
        }
        .navline{
            float: none;
            margin: 0 0 9px;
            > li {
                float: none;
                > a {
                    margin-bottom: 2px;
                    padding: 6px 15px;
                    padding: 6px 15px;
                    background:transparent;
                    color: rgba(255,255,255,0.8);
                    .border-radius(3px);
                    &:hover{
                        color: rgba(255,255,255,1);
                        background-color: rgba(0,0,0,.15);
                    }

                    .caret {
                        display: none !important;
                    }
                }
            }
            .nav-header {
                text-shadow: none;
            }
            &.pull-right {
                float: none;
                margin: 0 0 9px;
            }
        }
        .bigcrack-menu-wrap {
             a {
                 .transition(.2s linear);
             }
        }
        .dropdown-menu {
            a {
                padding: 6px 15px;
                padding: 6px 15px;
                background:transparent;
                color: #fff;
                color: rgba(255,255,255,0.8);
                .border-radius(3px);
            }
            li + li a {
                margin-bottom: 2px;
            }
            position: static;
            top: auto;
            left: auto;
            float: none;
            display: block;
            max-width: none;
            margin: 0 15px;
            padding: 0;
            background-color: transparent;
            border: none;
            .border-radius(0);
            box-shadow: none;
            visibility: visible;
            &:before, &:after{
                display: none;
            }
            li > a:hover,
            .active > a,
            .active > a:hover,
            a:hover {
                color: rgba(255,255,255,1);
                background-color: rgba(0,0,0,.15);
            }
        }
        .nav-collapse {
            overflow: hidden;
            height: 0;
            clear: both;
        }
        .current-menu-item > a{
            color: rgba(255,255,255,0.8);
            background-color: rgba(0,0,0,.15);
        }
        .pl-color-grey{
            .navline > li > a,.dropdown-menu a{
                color: #000;
            }
            .dropdown-menu{
                li > a:hover,
                .active > a,
                .active > a:hover,
                a:hover{
                    color: #000;
                    text-shadow: 0 1px 0 rgba(255,255,255,.5);
                }
            }
            .current-menu-item > a,
            .navline > li > a:hover{
                color: #000;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
            }
        }
        .nav-btn-crackbar {
            display: inline-block;
        }

    }

} //-- End Media Query --//

@media (min-width: 1000px) {

.nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
}

}//-- End Media Query --//



#2 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 03 June 2013 - 01:25 PM

Wow. Next time use paste.pagelines.com. Copy.pasting and changing wont cut it because you're is just getting overwritten. You need to make yours more important by putting additional selectors or calling !important.



#3 paulhibbitts

paulhibbitts

    Member

  • Members
  • 10 posts
  • Country: Country Flag

Posted 03 June 2013 - 04:27 PM

Thanks Nick - as you can tell, I am a indeed newbie to PageLines :-)

 

Here is the code I manually pasted in earlier:

http://paste.pagelines.com/2kw

 

If possible, it would be great to know how I could use additional selectors to change the menu collapse threshold as compared to a (I assume) whole bunch of !important statements.

 

Thanks very much,

Paul







Also tagged with one or more of these keywords: Crackbar, crackbar, navbar