Jump to content

Archived

This topic is now archived and is closed to further replies.

pazyluz

hide some pages, display others

Recommended Posts

pazyluz

I've created a webpage specifically for mobile phones.  now I'd like to hide that page from desktops and certain browsers.  On the page made for mobiles, I'd like to hide many of the pages made for non-mobiles.  I THINK the problem I'm having is finding the correct selector for pages, for which I've tried a hundred variations.  Below is SOME of the code I've tried that hasn't worked:

 

body.desktop body.ipad body.firefox body.chrome body.ie body.opera .page-id-466 {
  display: none !important;
}
 
body.mobile #page-id-420 #page-id-5 #page-id-313 #page-id-191 {
  display:none;
}
 
.hidden-phone {
.page-id-420;
.page-id-5;
.page-id-313;
.page-id-191;
}
 
Any help appreciated.
 
Mobile Page is attached to details theme made in DMS1

 

Share this post


Link to post
Share on other sites
Aires

Hi , pazyluz

 

Are you trying to hide the menu items to prevent the user from clicking on it or the page entirely on mobile.

Both of which can be done with media queries but if you  hide the page this way it will just give you a blank page all the content will not be visible but the user can still view it.

 

~Aires 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

As Aires, as stated we are going to need to know exactly what you're trying to hide i.e. your navigation menu items for those pages. Also, the code you have wrote above isn't valid code, you can not use CSS like that.

 

Also, please be aware that you can not use CSS to stop pages from being loaded in a mobile browsers, if that is what you intended with that code above.

 

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pazyluz

Aries and Danny, thank you for responding.

 

I would like to display the mobile menu on mobile phones. Yes, on mobiles, I am trying to hide the  "Secondary Navigation Menu" for the full/desktop site which displays in the footer of the full site. (I do believe I have managed to hide that footer nav on mobiles but have not been able to hide the "Secondary Navigation Menu" that displays when you click on the 3-bar "menu" in the upper right corner of mobiles.) 

 

I am also playing around with the YAMS plugin, free version, which allows you to select the menu you wish to display. 

 

After resolving the display issues above,

the next step will be to redirect mobile browsers to the mobile menu pages, and specifically to the landing page now called "Mobile."  

I am looking into various plugins and need to be able to both choose a menu and select the landing page and/or order of pages to display.  But maybe there's a better way or a "best practice."  Any guidance deeply appreciated.

 

Yes, btw, I was trying to hide specific pages on mobiles with css. (No wonder it didn't work!)

 

Merry Christmas, you two!  Thanks for all your help. 

 

http://peggygreen.net

Details theme

DMS1

Share this post


Link to post
Share on other sites
Danny

The Mobile menu should already display on mobile phones, as its a mobile menu?

 

If you do not want to use Secondary menu, then simply do not use select a Menu for the secondary option.

 

I have no experience nor even heard of a plugin called YAMS before. However, if you're having issue using that plugin, you will want to contact their support.

 

If you wish to redirect users from a mobile device to a specific page, you will need to ask this question on the WordPress support forums, as this isn't related to DMS.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Aires

Hi pazyluz,

 

If you are using YAMS then I would suggest you try a different plugin. That particular plugin was made is by Nick Haskins and I dont think he has any plugins in the store any more. 

 

But I do see it on my account page which is weird. Then again I may be wrong.

 

http://betterdms.com/wp-content/uploads/2013/09/Y.A.M.S-Lite.png

 

Just a suggestion.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
pazyluz

Aries, Danny, I've got that part sorted out now, thank you.  changes weren't showing up because of hosts use of NGINX.  if you add /?nocache=1  to the end of your site's url, you can work on an uncached copy, and the changes actually save.  

 

I have one remaining question about all this, and that is how to redirect mobile users to a different page than my site's home page.  IF that is specifically a wordpress issue, I'll go there.  Any advice appreciated meantime

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



×