Navigation overlap

[David Savage]

Hey Bill,

I am currently having an issue with the Navigation tabs overlapping underneath the main content when viewing the site on mobile screens. I have looked through past support posts, but still can’t seem to find a solution. I am wondering if you can help with this.

The site is, http://blackiesiteworks.ca/.

Thanks for your support.

David

[Bill Robbins]

Hello David,

Excellent question there. It looks like the new width of the sidebar that’s added via Custom CSS is the culprit here. This is what I would do. Go to the Theme Options page and choose the Styling tab. Scroll down to the Custom CSS box and find this code there:

#sidebar {
     width: 238px;
}

Change that to be like this:

@media only screen and (min-width: 1025px) {

	#sidebar {
	     width: 238px;
	}

}

and update your settings. That should cause the new width to only apply when the browser window is 1025 pixels wide or larger. That will allow the default responsive sizing to take effect below that point for you.

Let me know if you run into trouble there,
Bill

[David Savage]

Hi Bill,

Thanks a lot for your response. That worked out really well.

Cheers,
David

[Bill Robbins]

Glad that worked out for you David. Let me know if you need anything else.

Take care,
Bill

[Author]

Posts