How to move secondary sidebar above content on mobile devices

[selkin]

Use outreach pro theme with sidebar/content/sidebar layout.

I would like the secondary sidebar (alt sidebar, which is the LEFT sidebar) to appear above the content when displayed on mobile devices. ideally, anything tablet sized (portrait) and below.

here is the URL: http://209.95.59.111/~acquisit/blog/resources/

Using this method: (http://www.billerickson.net/code/move-sidebar-content/)

remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
add_action( 'genesis_before_content', 'genesis_get_sidebar' );

The primary sidebar is moved above content on mobile. But I would like the secondary sidebar content to be moved above the content.

I also tried specifically removing the secondary sidebar and adding it before content:

remove_action( 'genesis_after_content', 'genesis_get_sidebar_alt' );
add_action( 'genesis_before_content', 'genesis_get_sidebar-alt' );

So this is great in that it changes mobile behavior to how I would like it. BUT, it blows up layout(floats) in non-mobile browsers.

Help?!

BTW: the secondary/sectional nav in the secondary sidebar is generated using the BE SUBPAGES WIDGET plugin, which auto-generates subpage list/menu. Very nice for future maintenance by the client.

Thanks

http://209.95.59.111/~acquisit/blog/resources/

[frobn]

You can use conditionals like is_iphone(), is_mobile() and is_tablet(). with the Mobble plugin

[selkin]

Thanks Frobn.

I installed plugin. Tried function below. It behaves as if only the remove/add lines are there (no mobile checking going on).
From looking at examples, it seems that the "if" call needed to be within a function, but I do not know what the first add_action should be, so used 'template_redirect'. Perhaps that is the issue?

remove_action( 'genesis_before_content', 'move_alt_sidebar_b4content' );
	function move_alt_sidebar_b4content() {
		if (!is_mobile()) {
		remove_action( 'genesis_after_content', 'genesis_get_sidebar_alt' );
		add_action( 'genesis_before_content', 'genesis_get_sidebar_alt' );
		}
	}

[frobn]

Did you fix the code? It appears to be working perfectly in firefox.

I just found that there is a wp function to detect mobile so you may be able to eliminate the plugin.

<?php
if ( wp_is_mobile() ) {
	/* Display and echo mobile specific stuff here */
}
?>

[selkin]

I had found that also, but trying to take Sridhar's advice not to use it... found here.

Conditional for mobile check in WordPress

Cannot get this to work yet.

[selkin]

frobn,

Just for kicks, I decided to try the wp_is_mobile conditional (as I am not sure what shridhar is really saying. And, on first check, it seems like that is working as desired. : ) I will do further testing. Here is what I am using at this point...

`if ( wp_is_mobile() ) {
remove_action( 'genesis_after_content', 'genesis_get_sidebar_alt' );
add_action( 'genesis_before_content', 'genesis_get_sidebar_alt' );
}`

Thanks for checking/help so far.

[Brad Dalton]

Use Media Queries http://www.studiopress.community/topic/restrict-content-width/#post-162451

Conditionals for mobile devices are not accurate.

---

Tutorials for StudioPress Themes.

[selkin]

How can I call that function from a media query? Is that what you are saying? Or are you saying I should try and re-jigger everything using CSS and floats (which I believe would be quite a mess, if even possible)?

Thanks.

[Brad Dalton]

PHP mobile conditional tags don't work properly.

The best method is to use CSS which i linked to.

You will need to write a test your rules which position elements at specific screen widths.

---

Tutorials for StudioPress Themes.

[selkin]

Thank you. Are you quite certain this specific requirement and situation is possible with CSS? My gut says no.

[Brad Dalton]

There is no other reliable way to do this. CSS Media Queries are the best.

---

Tutorials for StudioPress Themes.

[frobn]

Besides accuracy media queries are simpler to implement. Reversing the floats on the primary and alternate sidebars at the breakpoint you want should accomplish it.

Thanks Brad.

[selkin]

I would like the secondary sidebar (alt sidebar, which is the LEFT sidebar) to appear above the content when displayed on mobile devices. ideally, anything tablet sized (portrait) and below.

In the page build/Genesis loop, content comes before sidebars. Swapping left/right sidebars with css still does not move the left sidebar's content before main page content.

This appears to be working...

remove_action( ‘genesis_after_content’, ‘genesis_get_sidebar_alt’ );
add_action( ‘genesis_before_content’, ‘genesis_get_sidebar_alt’ );

I understand you say the php mobile check is unreliable.

How might I trigger that php code using a css media query? I did not think that was possible. Or are you saying I should scrap the get_sidebar_alt altogether and try to a) switch sidebar content order on mobile and b) make it appear above main content which flows first in the page build?

Thanks.

[selkin]

I have left original url working with php mobile check. Looks fine in my testing.

I also used the following approach as an alternative (hate using the "T" word again). Anyway, I used a clean install of outreach pro and assigned this in 860px screen.

@media only screen and (max-width: 860px) {
	.wrap {
		padding-left: 5%;
		padding-right: 5%;
		display: table;
		float: none;
	}
	.content-sidebar-wrap {
		padding: 0;
		display: table-footer-group;
  		float: none;
	}
	.sidebar-secondary {
		display: table-header-group;
		float: none;
		width: 180px;
	}

Q: can I trigger php code using a css media query? If not, which of the two is the better approach and why (or is there some other approach)?

SE

[selkin]

Oh, sorry... second table header/footer approach URL is here...

http://209.95.59.111/~acquisit/test/

Uggh.

[Brad Dalton]

I don't think CSS will trigger PHP. I'm sure you can use CSS without any PHP.

---

Tutorials for StudioPress Themes.

[frobn]

In your acquisit/tesnt, at max-width 860px the alt sidebar moves to the top, then content, then primary at the bottom.

From 861px to 1023px the alt sidebar drops below the primary leading me to believe you will find your problem in the query: (max-width: 1023px)

[selkin]

Thanks Brad and Frobn.

Ok, so no triggering php from css.

@Frobn, thanks...I did not include this in the media query for 1023 yet...final code was pending both of your sage feedback.

[khanh11166]

Could you please take alook at my website?
Những bài tập thể dục giảm mỡ bụng tại nhà hiệu quả

[Author]

Posts