Menu, sidebar and page content overlap on mobile

[Jordan Chelli]

Hi,

first of all : well done for your great theme. It’s very beautiful.
I found a lot of help on the support to customize the theme.

I have a problem with the mobile display : menu/items in the sidebar/footer and the content of the pages collapse.
You can see an example on this page : http://tgcf.jordanchelli.com/menu/grilled-cheese/

What can I do to fix it ? For example : having all the items of the sidebar on the top and the content under.
A few information about what I’ve already done : I moved menu and logo to the left side of the page following your advises of this post : https://support.organizedthemes.com/forums/topic/moving-menu-and-logo-to-the-left-side-of-the-page/

Thank you very much and well done for your amazing job.

Cheers,

Joran

[Bill Robbins]

Good Morning Jordan,

Great looking site you have going there. So you’re wanting to have the widgets placed above the main content on small screens, correct? If that’s the case, here’s how I would go about that:

1. Go to your theme options page and choose the Style tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 767px) {
   
   	.sidebar {
   		position: absolute;
   		top: 255px;
   		left: 5%;
   		right: 5%;
   		z-index: 20;
   		width: 90%;
   	}
   	
   	#content {
   		margin-top: 250px;
   	}
   	
   	.sidebar #sidebar .widget {
   		margin-left: 0;
   		margin-right: 0;
   		width: 100%;
   		float: none;
   	}
   	
   }
   

3. Update your settings.

You can use that snippet in place of the one that’s there already. Let me know if that doesn’t do the trick.

Thank you for your business and have a great day,
Bill

[Jordan Chelli]

Hi Bill,

thank you very much for your answer.
It’s almost good, I just have my widget on my navigation menu now.

Have a great day,

Jordan

[Bill Robbins]

Hey Jordan,

Almost there. Let’s wrap this part of your Custom CSS in a media query so it only affects larger screens:

aside.sidebar {
	position: absolute;
	left: 40px;
	top: 255px;
}

Change it to be like this:

@media only screen and (min-width: 768px) {
	aside.sidebar {
		position: absolute;
		left: 40px;
		top: 255px;
	}
}

See if that helps out some. Let me know how it goes.

Take care,
Bill

[Jordan Chelli]

Hi Bill,

still not ok…

Take care too,

Jordan

[Bill Robbins]

Let’s replace the whole thing with this:

#text-logo {
	margin: 60px 40px;
}

@media only screen and (min-width: 768px) {
	aside.sidebar {
		position: absolute;
		left: 40px;
		top: 255px;
	}
}

#content {
	background-color: rgba(0, 0, 0, 0.6);
}

@media only screen and (max-width: 767px) {

        .sidebar {
                position: absolute;
                top: 355px;
                left: 5%;
                right: 5%;
                z-index: 20;
                width: 90%;
        }

        #content {
                margin-top: 250px;
        }

        .sidebar #sidebar .widget {
                margin-left: 0;
                margin-right: 0;
                width: 100%;
                float: none;
        }

}

If you need to move items around in there you can. To move the content area further down, adjust the margin-top: 250px to scoot it around. To change the sidebar’s placement, change the top: 335px to move it up or down on the page. The navigation bar will stay in place, so adjusting those two items should let you move them out of each other’s way.

Let me know how it goes,
Bill

[Jordan Chelli]

Hey Bill,

That’s awesome!! Thank you so much!! I did some adjustments in css and it’s now perfect.

Thank you again,

Have a great day,

Jordan

[Bill Robbins]

Glad it’s all sorted out now. Enjoy your day too 🙂

Bill

[Author]

Posts