Jump to content
paulhibbitts

Changing CrackBar's navbar collapse threshold

Recommended Posts

paulhibbitts    2
paulhibbitts

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://hibbittsdesign.com/courses/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 --//

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
paulhibbitts    2
paulhibbitts

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated! 
       


×