Change title and color of top menu in folders on mobile?

ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
edited April 25, 2015 in SmugMug Customization
I'm mostly clueless about what code I should set to make mobile work on my site (heck I'm usually clueless about standard code for computers), but right now mostly formatting seems right for my site on mobile (thanks for the CSS, Nicholas, Allen, Aaron, Denise, and I've probably left out a bunch of angels). However, I realize ignorance is often bliss. :D

There's one Very Pesky format problem, which is the default grey block that appears at the top of the screen once a viewer navigates to a folder. (Screenfly screenshot with arrow attached.)

How can I change that block to a color of my choice, and change the word "MENU" to something else, e.g., "Click here for the main menu"?

I have done many searches on Dgrin for this topic - found lots of code, but not for this bit.

Thanks.

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 19, 2015
    Edited....

    Try this:
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background-color: #f00 !important;
    	}
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header .sm-h5 {
    	display: none;
    	}
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header:before{
        content: 'Click here for the main menu';
    	}
    
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited April 21, 2015
    Edited....

    Try this:
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background-color: #f00 !important;
    	}
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header .sm-h5 {
    	display: none;
    	}
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header:before{
        content: 'Click here for the main menu';
    	}
    

    Whoa there that's - almost there, Mike!
    I got the text to show, but not the color. Still a grey block.
    Thank you so much for giving it a go.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited April 21, 2015
    - AHH, got it.

    I started to double-check and verify, the code goes in the main site CSS. I did a search for any existing code with:
    .sm-page-widget-nav-mobile
    in it and found none.

    and then I think I must have fixed some typo!
    sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background-color: #CAE7FF !important;
    	}
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header .sm-h5 {
    	display: none;
    	}
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header:before{
        content: 'Click here for the main menu :)';
    	}
    

    clap.gifivar

    Thanks, Mike! Now, if I can figure out borders and maybe the right color...
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited April 21, 2015
    Okay a wee problem. The click function didn't function. So touching the text went nowhere. I did see the blue bar flash by at the top, but the menu never showed up. I waited quite awhile.

    As a test I removed the code, and now the default grey MENU is in place and clicking works.
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 21, 2015
    ChancyRat wrote: »
    Okay a wee problem. The click function didn't function. So touching the text went nowhere. I did see the blue bar flash by at the top, but the menu never showed up. I waited quite awhile.

    As a test I removed the code, and now the default grey MENU is in place and clicking works.

    Sorry about that. I wasn't thinking about having it "clickable". I don't think you can change the text AND to be clickable. You can change the background color though.
    .sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
        background-color: #CAE7FF;
        }
    

    FWIW, you can use 'transparent' instead of '#CAE7FF'.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited April 21, 2015
    Oh Mike what a wonderful discovery: transparency instead of a color. I've had no clue that was an option and it certain is a necessity on my site, being such a jumble of colors.

    And so I opted to add a border and transparency only. It worked!

    I wish there was a way to change the text. As more of a naive visitor than a code person, I'll be honest that whenever I roamed my site on my cellphone, I *never* clicked the grey Menu. I thought it was a broken block of something that I would have to figure out eventually. After all I didn't put it there, it was completely alien looking against my site colors - couldn't be real. rolleyes1.gif

    Now that the block resembles something more apropos, there's nothing inviting about the word "MENU".
    "Main Menu Here"
    "Main Menu"
    "Click for Main Menu"

    something along those lines would be more "human". I wonder why one can't change the word...

    Thank you again!! wings.gif
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 22, 2015
    ChancyRat wrote: »
    Oh Mike what a wonderful discovery: transparency instead of a color. I've had no clue that was an option and it certain is a necessity on my site, being such a jumble of colors.

    And so I opted to add a border and transparency only. It worked!

    I wish there was a way to change the text. As more of a naive visitor than a code person, I'll be honest that whenever I roamed my site on my cellphone, I *never* clicked the grey Menu. I thought it was a broken block of something that I would have to figure out eventually. After all I didn't put it there, it was completely alien looking against my site colors - couldn't be real. rolleyes1.gif

    Now that the block resembles something more apropos, there's nothing inviting about the word "MENU".
    "Main Menu Here"
    "Main Menu"
    "Click for Main Menu"

    something along those lines would be more "human". I wonder why one can't change the word...

    Thank you again!! wings.gif

    You can add words before and after the word "Menu":
    .sm-user-ui .sm-page-widget-nav-menu-expand *::before {
         content: "Main ";
    }
    .sm-user-ui .sm-page-widget-nav-menu-expand *::after {
         content: " Here";
    }
    
    

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited April 25, 2015
    Oh Mike, now, I'm sure you know where my mind went with this magical bit of "how to add text before and after the word MENU".
    Not obvious?
    :D:D:D
    Can I insert a tiny image as the before and after, instead of text?
    :D:D:D
Sign In or Register to comment.