Breakpoints in BB Theme?

#1

Howdy,

I’d like to adjust the theme to have the mobile menu show up earlier than it is currently – 767px and below – and show up for pretty much all tablets portrait style, around 800px and below.

I know the plugin offers that but don’t see a setting for the theme.

#2

[Content Hidden]

#3

Hi Mike,

What you will want to do is use the CSS below and wrap it in a media query for your preferred max-width.

.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

To target devices when viewing on landscape/portrait, see the following post- http://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css

Thanks,
Danny

#4

Thanks Danny.

This looks like a bigger issue than I thought, because there’s also the matter of the logo being centered and other style points I want to implement at specific breakpoints.

Is there a file (or documentation for the theme) I can find this and just transfer to a child theme?

I’m new to the BB theme on this project. Typically use Genesis and I’m used to just going into the CSS and adjusting the media query settings in one spot.

Appreciate the help.

closed #5