Umani Mobile

[Carl]

Hey Bill.
You gave me instructions on how to move the content above the widgets on the mobile side. I did what you said to do and it removed the header and navigation to the bottom below the content. I would like the logo and nag to stay at the top and then the content and then the widget.

[Bill Robbins]

Carl,

Great question. Everything on the web is placed inside boxes. The content area makes up one box and the sidebar area (logo, navigation, widgets and footer) make up another box. It is possible to change the order of the boxes, but it’s not possible to split up a box and rearrange the order for the smaller screens.

It is possible to hide the widgets on a smaller screen if you’d like to do that. That’s probably as close as I can get you at this time. If you’d like to go that route, let me know and I can show you how.

Bill

[Carl]

This reply has been marked as private.

[Bill Robbins]

Carl,

That’s not a bad idea. At this point though I can’t make that large of a HTML structure change without possibly affecting a lot of sites in a bad way.

One possibility would be to swap the content to the top like I mentioned in another thread. We could then use absolute positioning to move the logo and navigation back above the content on smaller screens. That might just work.

If you want to give that a shot, swap the content around and let me know and I’ll be happy to see if the CSS can be adjusted to do that.

Bill

[Bill Robbins]

Thanks for swapping those around. Give this a try and see if it does the trick:

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

   
   @media only screen and (max-width: 767px) {
   	
   	#sidebar,
   	.taller #sidebar {
   		position: static;
   	}
   	
   	#content,
   	.taller #content {
   		position: relative;
   		top: 230px;
   	}
   	
   	#logo {
   		position: absolute;
   		top: 0;
   		width: 100%;
   		left: 0;
   		right: 0;
   		padding-bottom: 79px;
   		background-color: rgba(0, 0, 0, 0.8);
   	}
   	
   	#side-menu {
   		position: absolute;
   		top: 172px;
   		width: 92%;
   		left: 4%;
   	}
   	
   }
   

3. Update your settings.

Let me know how that goes,
Bill

[Author]

Posts