Sidebar location on Mobile home page

[bauerhaus 0]

In the Mobile version of the site, the sidebar is at the bottom on all pages but the home page. I want the home page sidebar to be right under the Main menu and before the Boxes. Right now on the home page the sidebar is on top of the boxes. I have the latest version of Wordpress and Framework installed. I also have browser specific CSS installed, so I can call out .mobile. Site: www.1000-oaks-winery.com The home page uses the Primary sidebar and the other pages use the Universal sidebar. I know this line of code makes the sidebar disappear: .mobile #sidebar-wrap {display: none;} I've also tried moving it with this code, but it didn't move at all: .mobile #sidebar-wrap {margin-top:-865px;} And I tried this: .mobile #sidebar-wrap {margin-top:50px;} I am hiding the Features with this: .mobile #feature_slider { display: none; } Any idea on how I can make the home page sidebar move to the top under the Nav Menu?

[Rob 547]

Changing the flow of sections in mobile mode is a somewhat new art that few have yet mastered. I'm unsure how to actually use it or apply changes. This link might, however, be of some help in understanding how things get done: http://trentwalton.com/2011/07/14/content-choreography/ Let me know if this helps.

[bauerhaus 0]

Thanks for the link! Ok, what if I think about it differently and say I will hide the sidebar with: .mobile #sidebar-wrap {display: none;} and with CSS tell the .mobile version to use a different Navigation menu, like the Simple Nav. This way I can include links from the sidebar in the main Navigation. I named my new navigation "Mobile," so I think it would start like the below, but then I'm not sure what to put next to tell it "use the Mobile navigation menu." .mobile #nav .menu-mobile ????

[catrina 103]

You can hide the sidebar with that CSS code you mentioned. As for telling the mobile version to use a different navigation menu, you can't enable two different navigation menus at the top using the menu settings or any other settings. One workaround would be to maybe add the menu (intended for mobile view) to the header using a hook then adding CSS that will hide it on the computer browser view so that it only shows on the mobile device.

[bauerhaus 0]

Interesting. How would you do that? And one other idea - can you choose to hide the sidebar just on the home page on mobile? I tried the below, but it doesn't work: .mobile .home #sidebar-wrap {display: none;}

[catrina 103]

You need to use a hook in the functions.php file in PlatformBase. Hooks are explained here: http://www.pagelines.com/docs/base-child-theme. The HTML for the navigation menu needs to be placed inside the hook. To create a navigation menu, please refer to the

list documentation here: http://w3schools.com/html/html_lists.asp. For styling the list using CSS, please see here: http://w3schools.com/css/css_list.asp Try this for hiding the sidebar: [code].mobile .home #sidebar1 div.scolumn {display: none !important;}[/code]

[bauerhaus 0]

Thanks for all of the links! I'll read up on it. That did not work to hide the home sidebar in mobile view. Any other ideas?

[bauerhaus 0]

Ok, I finally fixed having the sidebar over the boxes section. Since my home page is the only page that used the Primary sidebar I used this to hide it: .mobile #sb_primary {display: none;}