I know that design is part of the template, but is there any way to make the sidebar in Icon behave like a normal sidebar, sitting still on the right and not overlapping the top menu? It is just weird that it covers the menu, surely there’s a way to do that with CSS?
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.
Thank you.
Thank you. Here is the URL:
The sidebar completely covers the right side including the menu bar. I’d prefer that it was just still on the right side like a plain old blog sidebar.
Hi there,
I checked your website and understood what you mean. Unfortunately, it is not possible to do so unless with intensive customization code which is out of our support scope. I suggest that you use one of our other stacks if you find the sidebar of Icon not suitable for your needs.
Thank you for your understanding.
The only problem is that none of the sidebars on the other stacks work properly either.
Thanks for writing in! Regretfully, at this time I am not entirely certain what you mean 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 (perhaps some screenshots would be very helpful), we’ll be happy to provide you with a response once we have a better understanding of the situation.
Thank you for your reply, Nabeel.
By “making the sidebar normal,” I mean that I want it to scroll WITH the main content on the left so that my tall “skyscraper” ad and my social media widgets display. Instead, it just cuts off the content and remains static instead of scrolling. Also, after much struggle and custom code snippets in Sidebar.PHP and the global style sheet, I managed to FINALLY get my damned sidebar to stop displaying in mobile. And now these fixes are not working anymore and it’s HAPPENING AGAIN.
Judging from the other posts I’m seeing, I really don’t think you realize how important the sidebars are, in terms of ad revenue, social media amplification, and gathering followers/acquisition (for publishers) and upselling, brand building, email list signups, and other marketing/sales opportunities (for businesses).
For the 20-40 percent of website visitors who still come to my site via desktop machines, that sidebar ad is the third most profitable ad placement, the Facebook widget (which I’ve had to resize smaller and disable the post displays), and the Twitter widget (which only displays when Google Adsense serves a smaller ad), which are part of how I get social media followers, which helps drive traffic to my site. As for the rest, who come to my site via mobile, most of them are seeing my posts as Instant Articles via Facebook, since Facebook’s the main source of my traffic. But I’m still seeing a drop in traffic and a higher bounce rate because the mobile layout’s broken for those who are referred from other sources than Facebook. This makes my site look flaky and lowers my edge-rank with Facebook as well as my search/quality ranking with Google.
Here’s my site layout for a blog post on my desktop
Here’s the sidebar totally ruining my layout in mobile again.
THIS CSS no longer resolves the issue.
This CSS no longer hides my sidebar for mobile
@media(min-width: 980px){
body .x-sidebar.right {
margin-left: 21.536945%;
top: 140px;
position: fixed;
left: 50%;
}
}
This code in Sidebar.PHP no longer works either.
<?php
// =============================================================================
// SIDEBAR.PHP
// -----------------------------------------------------------------------------
// Handles sidebar output for posts and pages.
//
// Content is output based on which Stack has been selected in the Customizer.
// To view and/or edit the markup of your Stack's pages, first go to "views"
// inside the "framework" subdirectory. Once inside, find your Stack's folder
// and look for a file called "wp-sidebar.php," where you'll be able to find
// the appropriate output.
// =============================================================================
?>
<div class="x-visibility x-visible-desktop">
<?php x_get_view( x_get_stack(), 'wp', 'sidebar' ); ?>
</div>
I’m not sure why, but my sidebars blew up again right around when I tried to activate PRO and it completely blew up my site. I don’t mean just messing up my layout, my site and WordPress dash literally weren’t loading, and I had to go into the database from my CPANEL, find the table rows for the THEME and STYLESHEET and manually change them back from “pro” to “Xtheme.”
I’m going to upload the latest update to Pro and hope it works but honestly, I’m tearing my hair out and losing money every time someone on mobile leaves my site without reading my posts and when I spend time on this instead of actually writing, which is how I do my part to support our family.
Thank you so much for helping, I know this isn’t your fault. But as I’ve said in a previous post, I love X so much and it’s so disappointing that I can’t get something as basic as sidebars to work.
Hello There,
Thanks for updating in!
Please be advised that this code does not hide a sidebar in smaller screens:
@media(min-width: 980px){
body .x-sidebar.right {
margin-left: 21.536945%;
top: 140px;
position: fixed;
left: 50%;
}
}
This code will only work if the screen size greater than or equal to 980 pixels. It will set the right sidebar to have a left margin and position it as fixed at 140px from top and 50% from the left side.
I did noticed that you are using a caching plugin. Since you have installed a caching plugin W3 Total Cache, please always clear your plugin cache after doing the updates 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.
If you have caching feature in your hosting, you must clear the site cache as well.
Hope this helps.
Hi,
I would love to have normal looking sidebar for Icon stack too. It is just looking odd. Is there at least a way to have sidebar in Icon stack always on bottom like is on mobile?
Thanks.
Hi again,
You may try adding the following code:
div#top {
width: 100% !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;
}
.nano .nano-content {
overflow: visible !important;
position: relative !important;
}
.x-sidebar {
position: static !important;
min-height: 250px !important;
display: block;
width: 100% !important;
}
Please note that we won’t be able to support the issues caused by the above code.
Hope this helps!
Hi,
thanks for the code. It doesn’t do it thought, or not completely. I think there should be override for @media tag in CSS and just tell it that sidebar should be bellow for any size of screen, but I can’t seem to find this in main css of the icon stack.
Hi there,
It’s the special and one of the main feature of icon stack, its sidebar is different from other stacks. It uses javascript library (nano scroller) and some CSS so you can’t just override it with CSS. I recommend switching to another stack for easy CSS overriding.
Or please provide your site’s URL, the CSS should work with a bit glitch since there is a javascript attached to it.
Thanks!