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

ChancyRat

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.

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.

Hikin' Mike

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';
	}

ChancyRat

Hikin' Mike wrote: »

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.

ChancyRat

- 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 :)';
	}

ivar

Thanks, Mike! Now, if I can figure out borders and maybe the right color...

ChancyRat

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' Mike

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'.

ChancyRat

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.

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!!

Hikin' Mike

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.

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!!

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";
}

ChancyRat

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
Can I insert a tiny image as the before and after, instead of text?
:D:D