CSS to Change the "Menu" font color on Mobile?

Darter02

I'm coming up with a new color theme for parts of my site. The one big snag I am running into is the little "Menu" font color on mobile. It's too light and I want to change it to the darker color I use for text. Is there CSS to change that?

Hikin' Mike

Looks like you've been able to change it.

Darter02

Nope. This color theme can't be seen by anyone yet. This screencap is from my testing page.

Hikin' Mike

Add this to your site's theme's CSS and change the color to suit:

.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-label, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-label:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent .sm-accordion-item-label:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-label:active, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-action, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-action:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent .sm-accordion-item-action:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-action:active, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-page-widget-nav-menu-expand > a, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-page-widget-nav-menu-expand > a:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent .sm-page-widget-nav-menu-expand > a:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-page-widget-nav-menu-expand > a:active, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent ul.vertical a, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent ul.vertical a:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent ul.vertical a:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent ul.vertical a:active {
    color: #151515;
    }

Darter02

Thanks!

Anh Tu Nguyen

@Hikin' Mike said:
Add this to your site's theme's CSS and change the color to suit:

.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-label, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-label:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent .sm-accordion-item-label:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-label:active, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-action, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-action:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent .sm-accordion-item-action:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-accordion-item-action:active, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-page-widget-nav-menu-expand > a, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-page-widget-nav-menu-expand > a:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent .sm-page-widget-nav-menu-expand > a:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent .sm-page-widget-nav-menu-expand > a:active, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent ul.vertical a, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent ul.vertical a:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-accent ul.vertical a:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-accent ul.vertical a:active   {
  color: #151515;
  }

Thank you Mike. And how do you make the white bar (of the menu on mobile) disappear?

Hikin' Mike

@Anh Tu Nguyen said:
Thank you Mike. And how do you make the white bar (of the menu on mobile) disappear?

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
    background-color: transparent;
    }

Anh Tu Nguyen

@Hikin' Mike said:

@Anh Tu Nguyen said:
Thank you Mike. And how do you make the white bar (of the menu on mobile) disappear?

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
  background-color: transparent;
  }

thank you Mike!

CHRISRIEFENBERG

Hey Mike,

does this code also work when you have a hamburger menu for mobile? I entered this css command in my css advance theme but the font color is still the same.

Thanks in advance

Chris

Hikin' Mike

@CHRISRIEFENBERG said:
Hey Mike,



does this code also work when you have a hamburger menu for mobile? I entered this css command in my css advance theme but the font color is still the same.



Thanks in advance



Chris

It should. What is your site and what color are you trying to change.

CHRISRIEFENBERG

Hey @"Hikin' Mike"

ok i thought so too, but only the hamburger menu itself turns black. It feels like any changes that i m doing to the custom css theme have no effect at all and I dont know why. I tried several commands from aaronmphotography as well for the Lightbox and other things I want to customise, but nothing happens.

This is my site: www.chrisriefenberg.com

I m trying to change the color of the main menu: when I click on the hamburger menu: Home, Sports, Landscape, etc. I want them to be black but only when displayed on mobile.
So far for the hamburger menu i m using this code but as a content block:

@media only screen and (max-width: 768px) {
.sm-search-form, .sm-page-widget-social-links { display: none; }
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center{
text-align: left;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
color: white;
font-size: 48px;
width: 48px;
line-height: 75px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none ;
color: black;
}

.sm-user-ui .sm-page-widget-nav {
position: absolute;
top: 0;
right: -15px;
}
}

Thanks a lot

Chris

Allen

Noticed one error. EDIT: found it at the very end, disregard this post.

@media only screen and (max-width: 768px) {
.sm-search-form, .sm-page-widget-social-links { display: none; }
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center{
text-align: left;
}
} << Missing last }

Probably not a good idea to group so much inside a @media rule. Can be hard to troubleshoot later on.

Allen

If it was me I'd add a comment to that closing } just to keep things clear.

.sm-user-ui .sm-page-widget-nav {
position: absolute;
top: 0;
right: -15px;
}
} /* close @media rule */

I'd had this problem many times in the past, having no idea why any CSS was originally created, Any notes/comments will help greatly.

I try to add a comment around any CSS group explaining its purpose for later use.

/* add comment text for this grouping of CSS. Perhaps even a link to where this came from */
...
CSS here
...
/* end this comment for group */

CHRISRIEFENBERG

Hey @Allen

yeah its a bigger one but i just found and copied it without thinking too much about it as it worked and I got the hamburger menu.
Thanks for looking over it. I added your remarks thanks!!

I added a screenshot from my phone so that you can see how it looks like on my phone now. As you can see the ham menu itself is black but the drop down still white and quite hard to read on the image background.This is my main concern now. Any ideas how I will be able to fix that?

Best regards chris

CHRISRIEFENBERG

denisegoldberg

@CHRISRIEFENBERG said:
This is my site: www.chrisriefenberg.com

I just took a look at your site and I saw that you are allowing access to the Original images. These are normally used only for printing by SmugMug - unless you allow viewers to access them by clicking on the Original image. Yes, I know, you have right click protection turned on. That is really only a warning since in order to display the image it is stored in the browser cache. The cache is easily accessible, and by accessing the original image from the browser cache it can easily be stolen.

For example, in Firefox:

• click on image in gallery to show it in lightbox
• click on the sizes icon and select Original
• in another browser tab, type about:cache
• find the largest most recent file in the cache
• open the cache entry, then click the URL.
• right click / save

I recommend that you change the largest display size to anything smaller than Original.

From the help page Protecting my images:

FYI: SmugMug's right-click protection does not protect an image in non-gallery places such as forums, blogs, or Share emails. To keep your images out of forums and blogs, block external links (see above).

Right-click protection is a deterrent for image theft, but it shouldn't be considered foolproof. To truly protect your images, lock galleries with a password or apply a watermark and disable your originals.

CHRISRIEFENBERG

Ugh thanks @denisegoldberg

something that i simply didnt know/ see. I thought its all good by disabling right click. I made the changes accordingly, thanks for looking over so carefully!

Chris

Hikin' Mike

@CHRISRIEFENBERG said:
Ugh thanks @denisegoldberg

something that i simply didnt know/ see. I thought its all good by disabling right click. I made the changes accordingly, thanks for looking over so carefully!

Chris

Add this to your Theme's CSS:

/**
* Mobile Nav Text Colors 
***************************************************/    
.sm-user-ui .sm-accordion > .sm-accordion-item > .sm-accordion-item-label, 
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:active, 
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-label:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a:visited, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default ul.vertical a:visited,
.sm-user-ui .sm-accordion > .sm-accordion-item > a.sm-accordion-item-label:hover,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-label:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-page-widget-nav-menu-expand > a:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default ul.vertical a:hover,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-label:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-accordion-item-action:hover,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default .sm-page-widget-nav-menu-expand > a:hover, 
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-hover-color-default ul.vertical a:hover {
    color: #000;
    }

CHRISRIEFENBERG

What a relieve @Hikin' Mike

it works perfectly fine. So happy with the site for mobile now. Thanks for your work putting this command together...
Really appreciate your effort.

Cheers Chris