How to hide menu and breadcrumbs on mobile display

rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins
in SmugMug Customization

I've successfully added CSS code to hide the left sidebar (region) and breadcrumbs on a folder and its galleries...when viewed on my PC.
However, both still display when I view it on mobile devices (Samsung S10 and iPhone). I've perused the forum and tried some of the @media suggestions to no avail.
Please advise.

Here's how the folder looks on my mobile display. The sidebar shows above the gallery thumbnails and the breadcrumbs still display.

https://photos.smugmug.com/2016DisneyPlans/i-sjR7MDT/0/6701bd69/M/screenshot-folder-M.jpg

Comments

  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins

    Here is the CSS code that works for viewing on PC - but does not work on mobile display

    .sm-page-layout-region-left {display: none;}
    .sm-user-ui .sm-gallery,
    .sm-user-ui .sm-gallery-cover-container,
    .sm-user-ui .sm-page-layout-region-center {margin: auto !important;}
    .sm-breadcrumbs {display:none !important}

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    I'm not seeing the breadcrumbs, but this will hide the menu.
    .sm-user-ui .sm-page-widget-nav-vertical {display: none;}

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins

    Thanks Mike - but this didn't seem to work for me. The menu which is hidden on my PC view is still visible on my mobile phone.
    **
    (BTW...you're right...the breadcrumbs are hidden. Not sure why I thought they were still there).

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited March 9, 2020

    Where did you put the code? It should be in your Theme's Custom CSS section.

    https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins
    edited March 9, 2020

    Continued thanks for your help, Mike. I'd like to take a step back.

    My goal is to supress the vertical bar menu on a specific folder (VMI-Baseball) and galleries within that folder. I'd like the menu to exist at the Homepage level and all folders other than the VMI Baseball folder. The reason for this is that I want to share the VMI Baseball folder with folks I don't know and would just as soon they not navigate to the other family-related folders and galleries. (If they are inclined to navigate by manipulating the URL itself, then so be it). At the same time, I want my family members to have full range of navigation.

    Until a few days ago I didn't realize that SmugMug allowed customization coding and I didn't know that there was such a thing as CSS. I'm slowly learning the terminology - but still have a loooong ways to go. So , I'm afraid you are dealing with a newbie.

    I was full of myself when I "Made This Folder Custom" and added some CSS code "On Just This Page" to hide the left menu bar The CSS code I used was: .sm-page-layout-region-left {display: none;}. Looking back now, I also lucked into hiding the breadcrumbs by settting the container width dimenstions of the "On Just This Page" to 100%. This basically covered up the breadcrumbs. Pure luck.

    Then my daughter pointed out that when she viewed a VMI-Baseball gallery on her phone she could still see the menu and the navigation breadcrumbs. That's when I first realized that CSS code that works for a computer display does not necessarily work for a mobile device. Hence, this forum thread.

    Now ... to your suggestion to add CSS code (.sm-user-ui .sm-page-widget-nav-vertical {display: none;}) to the Theme's Custom CSS section. I'm not sure exactly how to get there. And...will that hide the menu on just the VMI-Baseball folder/galleries?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited March 9, 2020

    This should take care of it:

    /**
* Hides Left Sidebar, Centers Content
* and Hides Breadcrumbs
* on VMI Folder and Galleries
************************************************/
.sm-page-parentnode-3j2PFw .sm-page-widget-nav,
.sm-page-parentnode-3j2PFw .sm-page-widget-content,
.sm-page-node-3j2PFw .sm-page-layout-region-left,
.sm-page-parentnode-3j2PFw .sm-page-layout-region-left,
.sm-page-node-3j2PFw .sm-gallery-cover .sm-breadcrumbs,
.sm-page-parentnode-3j2PFw .sm-gallery-cover .sm-breadcrumbs {display: none;}

.sm-page-node-3j2PFw .sm-page-layout-region-center,
.sm-page-parentnode-3j2PFw .sm-page-layout-region-center {margin-left: auto !important;}

.sm-page-node-3j2PFw .sm-gallery-cover,
.sm-page-parentnode-3j2PFw .sm-gallery-cover {margin: 0 auto;}

.sm-page-parentnode-3j2PFw .sm-gallery-images {text-align: center;}

    @rpwoodjr said:
    Now ... to your suggestion to add CSS code (.sm-user-ui .sm-page-widget-nav-vertical {display: none;}) to the Theme's Custom CSS section. I'm not sure exactly how to get there. And...will that hide the menu on just the VMI-Baseball folder/galleries?

    You didn't see my link above? Here it is again: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins
    1. Sorry. Yes, I did see your link but i didn't see where the one-line code placed for Entire Site would impact the VMI-Baseball page only.
    2. What in the last set of code you provided makes it applicable to a mobile device? It, like what I had before works for viewing on a PC but not on my phone.
    3. Please don't feel obligated to continue this dialog. I'm obviously missing something.
  • AllenAllen Registered Users Posts: 10,013 Major grins

    Do you realize that anyone on the VMI-Baseball or in its galleries. All they have to do is in the
    address bar, delete all behind your basic site address and get to your homepage. There,
    the menu is available to browse anywhere.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,013 Major grins

    rpwoodjr > side note
    On my browser Firefox, when shrinking and expanding the width of browser all your folders and photos do not resize to fit the changing width.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited March 10, 2020

    I don't mind.

    This is actually better:

    /**
* Hides Left Sidebar, Centers Content
* and Hides Breadcrumbs
* on VMI Folder and Galleries
************************************************/
.sm-page-node-3j2PFw .sm-gallery-cover .sm-breadcrumbs,
.sm-page-parentnode-3j2PFw .sm-gallery-cover .sm-breadcrumbs,
.sm-page-node-3j2PFw .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left,
.sm-page-parentnode-3j2PFw .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {display: none !important;}

.sm-page-node-3j2PFw .sm-page-layout-region-center,
.sm-page-parentnode-3j2PFw .sm-page-layout-region-center {margin-left: auto !important;}

.sm-page-node-3j2PFw .sm-gallery-cover,
.sm-page-parentnode-3j2PFw .sm-gallery-cover {margin: 0 auto;}

.sm-page-parentnode-3j2PFw .sm-gallery-images {text-align: center;}

    This is for the sidebar: .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left.

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins

    Well Mike...I don't have a clue how the code works - it's like magic to me. But now it works for both my PC view and mobile view. This whole HTML / CSS code is soooo different from other programming languages I've been exposed to. So, I'll just have to accept you giving me the fish rather than teaching me how to fish...cause at 69 years old I sure don't have it in me to learn it now. :)

    There are a few minor customizations I want to try on the VMI galleries. If I can't figure it out, you may hear from me again.

    THANK YOU SO SO MUCH!!

    Ralph

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @rpwoodjr said:
    Well Mike...I don't have a clue how the code works - it's like magic to me. But now it works for both my PC view and mobile view. This whole HTML / CSS code is soooo different from other programming languages I've been exposed to. So, I'll just have to accept you giving me the fish rather than teaching me how to fish...cause at 69 years old I sure don't have it in me to learn it now. :)

    There are a few minor customizations I want to try on the VMI galleries. If I can't figure it out, you may hear from me again.

    THANK YOU SO SO MUCH!!

    Ralph

    No problem. I'll be here until next Tuesday (big vacation).

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins

    Looks like you're off the hook... for now. :smile: I was able to take care of the last two customizations I wanted to make. 1) Removed the "Buy" button and 2) Placed a link in the descriptions of the galleries so that the user can easily go back to the VMI-Baseball folder from the gallery. Thanks again...and hope you have a great vacation!

  • rpwoodjrrpwoodjr Registered Users Posts: 20 Big grins

    Hi Mike - I'm back. :smile: Not sure if you're currently available but figured I'd go ahead and post my next question(s). Although I'm pretty ignorant on CSS/HTML coding and all the syntax that goes with it, I think I'm capable of "monkey-see-monkey-do" coding. I'd like to apply the customization you helped me set up for one of my folders to several others. It appears that you determined a node value (3j2PFw) related to my VMI-Baseball folder/galleries and I don't have a clue how you came up with it. So...two related questions....
    1. Am I correct that I can use all the same code you came up with for me on other folders as long as I just change that "3j2PFw" value to the value related to the other folders I want to customize?
    2. How do I go about identifying the node values for those other folders? (all folders except for "Family")

    Thanks,
    Ralph

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    @rpwoodjr said:
    Hi Mike - I'm back. :smile: Not sure if you're currently available but figured I'd go ahead and post my next question(s). Although I'm pretty ignorant on CSS/HTML coding and all the syntax that goes with it, I think I'm capable of "monkey-see-monkey-do" coding. I'd like to apply the customization you helped me set up for one of my folders to several others. It appears that you determined a node value (3j2PFw) related to my VMI-Baseball folder/galleries and I don't have a clue how you came up with it. So...two related questions....
    1. Am I correct that I can use all the same code you came up with for me on other folders as long as I just change that "3j2PFw" value to the value related to the other folders I want to customize?

    Yes. All you need to do is change the number.

    @rpwoodjr said:
    2. How do I go about identifying the node values for those other folders? (all folders except for "Family")

    Easiest way is to view the source code for that page (Ctrl + U) and find the node number as an example:

    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Sign In or Register to comment.