Sidebar moves down under content when choosing custom width in customizer

I was using the 1.5 beta for about a week, and noticed this issue then, but waited till the release came out. When I attempt to adjust the sidebar manually (custom) in the blog layout, the sidebar then moves down under the content and is not visible along side the content.

When I change the setting back to large, medium or small, the sidebar displays properly.

I’ve tried everything I can think of:

  • Disabled all plugins
  • Changed themes, twice
  • I’m using a BB child theme, so I tried just using the main theme. Same issue.
  • Temporarily removed my custom CSS. No change.
  • Optimized my WP database. No change.
  • Changed permalinks (it was worth a try)
  • I thought it might be a Safari issue (Mac), but the same thing happens in Chrome

I’ve run out of ideas at this point. I figure it’s not the theme itself, since I tried it on a local install and it works fine. But if it’s not a plugin conflict, what else could it be? Any suggestions are appreciated.

The site is not public yet so I would need to provide access if needed.

Thanks.

[Content Hidden]

Hey Dairrell,

This is actually a bug and I have already filed a report. Thanks for the heads up! :slight_smile:

Ben

Thanks Ben.

For now, I’ll just use the default sidebar settings.

I don’t know if this is related, but I’m also having a problem with the font size and line height slide adjuster. In Safari (Mac vs. 9.0.2) I can adjust the font size with the slider, but cannot manually enter a value in the provided text field. The line height slider doesn’t appear to working at all, though I notice movement in the page. In Chrome (Mac vs 49.0), pretty much the same issues. When I manually enter a value, I click outside the box and it seems to change temporarily. If I try to change it back to a lower value manually, it keeps reverting to the higher value I just set. I can move the slider to make the adjustment though on the font size.

Hey Dairrell,

I just checked your site and it seems you have custom CSS added to the p tags which are marked important. That would be one reason why the theme settings would quit working. Can you try removing those custom styling and see if you get the same thing?

Ben

Hi Ben,

Thanks for taking a look.

I mentioned in my original post that I had disabled/removed the custom css as one of my tests, but that didn’t change anything. Perhaps you missed that part of my post.

Dairrell

Would it be fine if we’re to remove it for testing? As well as deactivating plugins and/or changing themes?

Ben

Sure. That’s not a problem. I have the site backed up anyway.

I’m having the same problem on another install, on a client’s site that doesn’t have many plugins, so it doesn’t seem to be restricted to just a problem on my site. I just installed the BB plugin and theme on the client’s site this morning, with fresh downloads of each, and I’m still getting the same issue.

Dairrell

Hey Dairell,

I’m experiencing the exact same thing on my end. I’ll go ahead and file a bug report. Or I’ll probably just update the one I create earlier. :slight_smile: Again, thanks for the heads up! :slight_smile:

Ben

Thanks. I thought maybe the code gods were messing with me. :slight_smile:

No worries at all, Dairrell! Just curious though, what OS and browser were you using when you experienced the issue?

Ben

Mac OS 10.9, Safari 9.0.2, Chrome 49.0

Hey Dairell,

Just letting you know we’ve already fixed this on our end. :slight_smile:

Ben

Thanks Ben.

Would you mind sharing what the fix is?

Thanks,

Dairrell

Hi Dairrell,

To apply the fix, you will need to connect to your server via FTP and edit the theme.less file. Which is located in /wp-content/themes/bb-theme/less/. Once there scroll down to line 2456 where you should see the following LESS CSS.

/* custom sidebar width */
  .custom-sidebar-width() when (@custom-sidebar-size > 0) {
    .blog, .single:not(.woocommerce), .archive:not(.woocommerce), .search {
      .fl-sidebar {
	width: @custom-sidebar-size;
      }
      .fl-content {
        width: (100-@custom-sidebar-size);
      }
      .col-md-custom {
        float: left;
      }
    }
  }

Replace all that with the following:

/* custom sidebar width */
  .custom-sidebar-width() when (@custom-sidebar-size > 0) {
    .fl-sidebar {
      width: @custom-sidebar-size;
     }
     .fl-content {
       width: (100-@custom-sidebar-size);
     }
     .col-md-custom {
       float: left;
     }
  }

Thanks,
Danny

Thanks Danny. That worked for me.

I appreciate all the help on this topic.

Dairrell

Awesome! And no worries at all, Dairrell. :slight_smile:

Enjoy BB!

Ben

One thing I noticed regarding this issue:

I downloaded and installed BB on a new install and was getting the same issues with the sidebar. I made the theme.less adjustment, then I went back to the customizer, switched the sidebar back to large, then switched it back to custom again. The custom sidebar issue was fixed after that.

Does the new downloads of the BB theme include the theme.less fix?

Thanks,

Dairrell

Hey Dairell,

The issue before was that the custom sidebar option only works on the blog page, i.e, on the page which you set as Posts Page under Settings > Reading. Try creating a new Page, then set it to use the Sidebar page template, you’ll notice the problem happening there. :slight_smile:

Ben

Hi Ben,

I’m still having this problem. Has this not been fixed in the newest version yet? I downloaded the most recent version and I see that the issue is still occurring. As you said, it’s ok on the blog page sidebar, but if I create any new pages, the sidebar gets whacked when I choose a custom width.

Perhaps I misunderstood when you said above that it was “fixed on our end”. Just wanted to clarify if this is still an unresolved issue in the current version.

Thanks,

Dairrell