Custom Breakpoints for Navigation

BB Theme
1

Greetings all,
I have a test site at http://harvestercu.wpengine.com/ that I’m trying to get the navigation to break to the stacked tablet portrait format a little sooner. It’s at 1091px to 1123px in width where things get wonky because of the number of nav items. Any suggestions on how to best adjust this? Once it breaks to the logo above and nav below things are fine.

2

Hey Jon,

Try the CSS snippet below. Feel free to change the query’s widths to suit your needs. :slight_smile:

@media (min-width: 1091px) and (max-width: 1123px) {
  .fl-page-nav-right .fl-page-header-row > div {
    display: block;
    width: 100%;
  }
  .fl-page-nav-right .fl-page-header-logo {
    text-align: center;
  }
  .fl-page-nav-wrap {
    text-align: center;
  }
  .fl-page-nav-right .fl-page-nav ul.navbar-nav {
    float: none !important;
  }
  .fl-page-nav-right .fl-page-nav ul.navbar-nav > li {
    display: inline-block;
    float: none;
  }
  .fl-page-nav-search {
    display: none;
  }
}

Ben