sidebar is on top of content in mobile view

[outtareach 3]

In mobile view the sidebar doesnt show up on the side it is actually overlayed on the site. Is there any possible help on this issue?

[Danny+ 1,327]

Hi,

From the Looks of it you have your sidebar set to position:fixed, this is most likely the cause of the issue. Remove this custom CSS and then view your site again.

[outtareach 3]

thanks but I changed it and now it works but showing under the main content and not on side. The client wants the menu bar fixed, can I do this while having it look correct or is there some give and take?

[Danny+ 1,327]

If you disable mobile view this should resolve your issue. To disable Mobile view, go to Wordpress Admin Dashboard > PageLines > Site Options > Layout Editor, scroll down until you see "Disable Mobile Optimized View". Check this and save your settings, then review your site and see if this resolves your issue.

[outtareach 3]

no it didnt, I switched mobile off and looked at it and the menu was still under the content. I then changed the menu back to fixed and it is now overlayed over the content so neither option seemed to have worked.

[outtareach 3]

with either option this does not solve this issue. That menu is below the content while the seach is on the correct side. I thought the theme was responsive?

[Danny+ 1,327]

Hi,

PageLines Framework is responsive however, you first made changes to the way the sidebar displays by positioning it in a fixed postion. Fixed means fixed, regardless of screen resolution, device or browser, if you set an element on your site to fixed it will be fixed.

Now, I you have me completely confused as you say you want to disable mobile view but in your last post, you say this "I thought the theme was responsive?". So which is it, do you want a static width website meaning that if your site was viewed on a iPhone, the users would need to zoom in to read text and then scroll left or right to view other parts of your site or do you want a responsive site ?

Can you please confirm which and we will be able to assist you further.

[outtareach 3]

I had made the menu unfixed so that it scrolls and with doing that the menu was not overlayed on the content as before but was under the main content so neither solution got the menu where it it suppose to be. Im fine with having them zoom in if the menu bar can stay fixed as they want this for their site. Right now neither works for me so I will go with whichever works. Currenty when looking at it with a unfixed menu this is what I get.

[outtareach 3]

Anyone have an idea on whats going on here? I am just using a basic sidebar and the menu is displaying under the content. I am not sure of whether to start a new topic or wait for help on this one as its been a minute and I need to find a solution for thie project. Any help would be appreciated.

[James B 436]

Hi there, responsive design will stack the elements on top of one another in that way. I can ask the developers if there is a way to disable this, but as it currently stands the menu is in the sidebar so it will automatically go under the main page content.

I don't think there's a quick Css fix for this as this is how the responsive design has been set up. You might be able to change the stack order though. I'll ask for you though and someone will post an update on this thread shortly.

[outtareach 3]

yeah you are correct, I just made it static and now the sidebar is in the correct place. I guess thats what they will have to have as the option other than responsive. So what would be the other option here? Making the site width smaller to fit a smart phone screen?

[Rob 547]

If you shrink the site size to fit one mobile device, you're going to consistently be faced with resizing for different devices. It may look great on an iPhone, but then what happens on a Samsung, a Kindle, a Nook? And so on. And if it's small, how will it appear to those on wide-screen laptops or even Internet connected 60" televisions?

We provide http://pagelines.com/store/plugins/browser-css which will allow you to set CSS on a browser basis. This might help.

[Elizabeth 1]

I don't think there's a quick Css fix for this as this is how the responsive design has been set up. You might be able to change the stack order though. I'll ask for you though and someone will post an update on this thread shortly.

 

Hi,

 

Just joining this thread to ask whether you checked whether the stack order could be changed as I'd like to know.

 

Thanks.

[James B 436]

Hi there, I've asked this recently and at the moment there are no options to change the stack order unfortunately. This could be something that Pl would look into at a later date, it has been suggested :-)

[beardedavenger 158]

This is actually how responsive works, across the board. There's a new CSS spec in the works called CSS Regions, where we can actually define where items end up when viewed on small screens. However right now browsers don't support it, so until they do, there's really nothing that can be done....for the most part.

 

You *can* do some trickery with css, by absolutely positioning the sidebar with a media query, giving it a top:0, and forcing #page or #site down with margin-top: whatever. But right now we're at the mercy of the browser.

[regalcreative 0]

Couldn't one just override whatever function outputs the sidebar and main code, and just switch the order in which they get output? I have been looking around and haven't been able to find the function, but surely one exists.

[James B 436]

Hi there, we're unable to support any changes to the core files, but you can turn off the mobile display in Pagelines>site options>layout editors so it will display in the same setup as the desktop view. This way it won't stack the elements.