Sidebar Interferes with main content (blocks hyperlinks) for narrow windows

The sidebar is interfering with the main page content for narrow screens (shrink my browser window enough to get the header menu to collapse into a hamburger menu) and for mobile devices. The primary issue is that the hyperlinks can no longer be clicked. In addition, the search menu and/or social widgets tend to get jumbled around.

I have a multisite. It fails to load on one site: http://ieeepcic.com/2017conference/
But on the other site, the sidebar properly loads and doesn’t have this issue: http://ieeepcic.com/conference/author-resources/

I read through various CSS modifications that could be made and tried a few to no avail.

I have tried the following:

  1. move the sidebar from the right to the left. The only thing that fixes it is setting the page to no sidebar.
  2. disable the header menu; disable the header image; change the header menu; nothing fixed the issue with the sidebar enabled
  3. remove one item at a time from the sidebar; add one back; nothing fixed the issue
  4. created a test page and entered only a hyperlink; this didn’t solve the issue

I currently have it set to disable the sidebar on the critical page that I need hyperlinks to work: http://ieeepcic.com/2017conference/conference/register/

Any suggestions? Thanks.

Hi there,

I hope you are having an awesome day and thanks for contacting us regarding your query.

Did you manage to solve the issue you’re having here?
I tried resizing my browser and the links worked perfectly fine there.

I also visited from my phone and it looks and works perfectly fine as well. Also, I’m seeing no signs of jumbling of the sidebar on mobile breakpoints.

Below is a screenshot of the sidebar from my phone.

Could you clear those browser caches and see if that helps?

I look forward to your reply :slight_smile:

Cheers!

It hasn’t been fixed. The menus show up properly but the main text can no longer be selected and the hyperlinks do not function. Take a look at the highlighted link that is broken since the window is too narrow.

Hi there,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media only screen and (max-width:31.25em) { 
	.widget-area {
    clear: both!important;
}
}

Please let me know if that helps.

Best Regards,
Support

That fixed it. Thank you!

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support