change the sub menu and menu color for the active page

Karlsberg

Hi everyone,
I succeeded to change my active menu color for this page ( https://kellianbier.smugmug.com/Portfolio ) with this CSS code :

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
color: #11556E !important;
}

Unfortunately I can't figure it out how can I do the same with this second page for the menu and the sub menu to change color when activate ( https://kellianbier.smugmug.com/Portfolio/Surf/ ). Does anyone knows how to do it?

Have a great day !

Hikin' Mike

Remove this because it will conflict with the code I'm going to give you:

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  color: #050505 !important;
}

Remove this too:

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
  color: #11556E !important;
}

Use this instead.

/** 
* Different Color for Active/Hover Sub-menus
***************************************************/    
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after {color: #11556E;}       

Hikin' Mike

Just to let you know I don't see your font 'Avenir' on your menu. You probably see it because you loaded it on your computer.

If you want to use a non-Google font, you need to read this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

Karlsberg

Yes, it works like a charm ! Thank's for the information about the font I will probably purchase the futura font so I will use the technique to add google font.
Have a great day !

Karlsberg

I bought this afternoon the futura font and i tried to add it in this page ... it's ok on my computer but in other computer they can't see it.
This is my code and i'm probably doing something wrong. My font are in a file name called : "fonts"

This is my code

@font-face {
font-family: 'FuturaPTW01-Book';
font-weight: normal;
font-style: normal;
font-display: swap;
src: url('https://kellianbier.smugmug.com/Portfolio/fonts/FuturaPTW01-Book.eot');
src: url('https://kellianbier.smugmug.com/Portfolio/fonts/FuturaPTW01-Book.eot?#iefix') format('embedded-opentype'),
url('https://kellianbier.smugmug.com/Portfolio/fonts/FuturaPTW01-Book.woff2') format('woff2'),
url('https://kellianbier.smugmug.com/Portfolio/fonts/FuturaPTW01-Book.woff') format('woff'),
url('https://kellianbier.smugmug.com/Portfolio/fonts/FuturaPTW01-Book.ttf') format('truetype'),
url('https://kellianbier.smugmug.com/Portfolio/fonts/FuturaPTW01-Book.svg#FuturaPTW01-Book') format('svg');
local('FuturaPTW01-Book'),
local('FuturaPTW01-Book');
}

.futura-font {
font-family: 'FuturaPTW01-Book' !important;
}

/* Change the color of the social media icons */
.sm-page-widget-social-links a {
color: #050505 !important;
}

/* Change the font size of the top menu */
.sm-page-widget-nav-toplink {
font-family:"Futura PT W01 Book";
font-size: 16px !important;
font-weight: 300;
}

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
color: #050505 !important;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #9B9999 !important;
}

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
color: #11556E !important;
}

/* Transition the links so they fade in and out */
a {
-webkit-transition:color 0.25s ease-in;
-moz-transition:color 0.25s ease-in;
transition:color 0.2s ease-in;
}

}

.sm-user-ui .sm-tile-content > .sm-tile-info {background: rgba(255, 255, 255, .1);}

.sm-user-ui .sm-tile-info .sm-tile-title {
font-size: 48px;
font-weight: 400;
color: #fff;
font-family: 'FuturaPTW01-Book' !important;
text-transform: uppercase;
letter-spacing: 9px;
text-shadow: 4px 3px rgba(0,0,0,0.1);
}

/* Hide the "Photo Sharing by SmugMug" Footer Text */
.sm-page-powered-by {
overflow:hidden;
height:0;
}

Hikin' Mike

You have to upload the fonts someplace online. You can't upload a font to SmugMug. If you have your own domain, you should be able to create a folder or subdomain to upload them.

Karlsberg

My bad thank's for all this informations.

Karlsberg

It works with a Direct Download Link from Dropbox thank's again for all this tips !

Hikin' Mike

@Karlsberg said:
It works with a Direct Download Link from Dropbox thank's again for all this tips !

Glad it worked. I tried using Dropbox on one of the fonts I have yesterday but it didn't work. Forgot to add !important.