Jump to content
outtareach

sidebar is on top of content in mobile view

Recommended Posts

outtareach    3
outtareach

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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

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.

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

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?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

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.

mobile_view.jpg

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

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?

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Elizabeth    1
Elizabeth

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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 :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
beardedavenger    158
beardedavenger

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.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
regalcreative    0
regalcreative

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.

Share this post


Link to post
Share on other sites
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Anthony CALCI
      By Anthony CALCI+
      Hello,
      I have switched from the Framwork theme to DMS theme on http://calcipatrimoine.theproofingcompany.fr (miror site of http://calci-patrimoine.com).
      But I have now only the Primary sidebar in the Widget section ! Secondary sidear, Footer sidebar have all disapear...
      Can I have help to have them back ?
      Regards,
      Anthony
    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×