Jump to content


Photo
- - - - -

sidebar is on top of content in mobile view

mobile sidebar

  • Please log in to reply
16 replies to this topic

#1 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 17 September 2012 - 11:13 PM

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?

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17124 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 September 2012 - 07:38 AM

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.

#3 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 28 September 2012 - 01:01 AM

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?

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17124 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 September 2012 - 07:57 AM

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.

#5 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 28 September 2012 - 07:25 PM

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.

#6 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 03 October 2012 - 01:50 AM

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?

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 17124 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 October 2012 - 08:20 AM

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.

#8 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 03 October 2012 - 03:32 PM

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.

Posted Image

#9 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 08 October 2012 - 08:07 PM

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.

#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 October 2012 - 02:45 AM

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.

#11 outtareach

outtareach

    Super Member

  • Members

  • 221 posts
  • LocationNY
  • Framework Version:Version 3.4.2
  • Country: Country Flag

Posted 09 October 2012 - 05:01 AM

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?

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 09 October 2012 - 09:13 PM

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

Please Login or Register to see this Hidden Content

which will allow you to set CSS on a browser basis. This might help.

#13 Elizabeth

Elizabeth

    Advanced Member

  • Members
  • 44 posts
  • Country: Country Flag

Posted 03 December 2012 - 12:12 PM

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.



#14 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 December 2012 - 01:55 AM

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



#15 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 05 December 2012 - 02:08 AM

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.



#16 regalcreative

regalcreative

    Member

  • Members
  • 10 posts
  • Country: Country Flag

Posted 27 February 2013 - 09:44 PM

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.



#17 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 February 2013 - 09:58 PM

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.







Also tagged with one or more of these keywords: mobile, sidebar