Docs

[gnyc]

Hey guys,

I’m curious how to set what screen width the sidebar shows up in the Icon Theme. It’s currently set to 1200, and I’d like it to show up at 1340. Any insight would be greatly appreciated!

[Darshana]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[gnyc]

This reply has been marked as private.

[Friech]

Hi There,

Thanks! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[gnyc]

Here’s a marked up guide for what I would like to accomplish. Please let me know if this is clear.

[Rue Nel]

Hello There,

To resolve this issue and be able to show the sidebar only when the screen is wider than 1340px, please add the following css code in the customizer, Appearance > Customize > Custom > CSS at the bottom of your other custom css

@media(max-width: 1340px) {
  .x-sidebar-content-active .x-sidebar {
    display: none !important;
  }

  body.x-sidebar-content-active, 
  body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active {
    padding-left: 0;
  }
}

Please let us know if this works out for you.

[gnyc]

It works for the sidebar content, but there’s still the white band that comes up. Picture attached.

[Rue Nel]

Hello There,

Before I posted the code I have tested it in my local testing server. Since you have installed a caching plugin W3 Total Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Please let us know how it goes.

[gnyc]

Cleared the cache and disabled W3 Total Cache and unfortunately it’s still an issue. I inspected the element and it’s page padding–the actual navbar goes away, but the padding that creates the space for it is still there. I’ve left it live for the time being so you can take a look.

[Rad]

Hi there,

Yes, I can see that now, but I can’t confirm what’s the issue with the CSS since your site resources are minified and cached.

Your caching is actually an overkill, you have W3 Total Cache, but you also have Autoptimize ( http://greenerynyc.com/wp-content/cache/autoptimize/css/autoptimize_7453e431b82a57236a67920da1463f2b.css )

Would it be okay if they are disabled while we’re testing it?

Thanks!

[gnyc]

Got it. They’re both disabled now.

[Paul R]

Hi,

Please replace the css code provided above with this.

@media(max-width: 1340px) {
  .x-sidebar-content-active .x-sidebar {
    display: none !important;
  }

  body.x-sidebar-content-active, 
  body[class*="page-template-template-blank"].x-sidebar-content-active.x-blank-template-sidebar-active {
    padding-left: 0 !important;
  }
}

Hope that helps.

[gnyc]

That did help. Thanks again for the tremendous service guys!

[Lely]

You’re welcome!

Cheers!

[gnyc]

Actually I just found one more problem. The navbar moves left 250 pixels a little too early, leaving an open gap on the navbar.

I was able to find the command by inspecting the element, and here’s the code I copied from Chrome:

@media (min-width: 1200px)
body.x-sidebar-content-active .x-widgetbar, body.x-sidebar-content-active .x-navbar-fixed-top, body[class*=”page-template-template-blank”].x-sidebar-content-active.x-blank-template-sidebar-active .x-widgetbar, body[class*=”page-template-template-blank”].x-sidebar-content-active.x-blank-template-sidebar-active .x-navbar-fixed-top {
left: 250px;
}

However I’m not sure how to change:

@media (min-width: 1200px)

to

@media (min-width: 1300px)

so that only the navbar is affected.

[Author]

Posts