Menu Semi Transparent Background

p33photography

Hi! When I customize my site, SmugMug allows me to add a "Mask" (aka a semi transparent background) behind my Header. I want to create a semi transparent white mask behind my menu bar. Right now, I have photos as my background, so you can't see my menu bar very easily, hence why I need a white background to my menu!

Smugmug support told me I need a CSS customization. How can I do this? Thanks!!!

Hikin' Mike

Start by giving us your website. Since you are a new user, you can't put a live link so just type in like this 'your website.com'

bamnesia

Hi, exact same question as p33photography. Would like a white background for menu bar when scrolling as everything because pretty much invisible with a transparent background.

beautifulamnesia.smugmug.com

Part 2 of the question, is there a way to make my header not so high, i.e decrease the height?

Thanks very much.

Hikin' Mike

@bamnesia said:
Hi, exact same question as p33photography. Would like a white background for menu bar when scrolling as everything because pretty much invisible with a transparent background.

You should be able to add a colored background on the menu/header by editing your theme. While in the Customizer find 'Entire Site > Theme'. Click on the wrench. You'll see 'Edit Theme > Advanced'. You should see Site Section Colors. Edit the header section to suit.

Part 2 of the question, is there a way to make my header not so high, i.e decrease the height?

Your logo is 110px high with some transparent top and bottom. You need to edit (crop) to decrease the height as there is no margin/padding added.

bamnesia

Genius! Thank you so much Mike and such an asset to the community as I see your name all around helping others. Cheers.

Hikin' Mike

Realized your home page design won't work well with a white background, so I would add CSS:

/* Transparent Header for Home Page */
.sm-page-home .sm-page-layout > .sm-page-layout-region-header.sm-page-layout-region-pinned {
    background:rgba( 255, 255, 255, 0 );
    }

/* White Header Background */   
.sm-user-ui .sm-page-layout > .sm-page-layout-region-header.sm-page-layout-region-pinned {
    background:rgba( 255, 255, 255, 1 );
    }

bamnesia

Hi Mike, thanks for that. I added the CSS but it didn't really make a difference compared to when I edited the theme header section (changed colour to white) and used a 70 percent transparency instead of 100 percent. Was this supposed to do something different?

Regarding my logo, smugmug will not allow me to upload a logo smaller than 500 px wide ... I have tried and it keeps cropping them on both sides (to a square) so I am forced to have a 500 px wide logo (which I try and shrink down but when I do it becomes blurry) ... any idea why this is? If you have a look now you will see what I mean regarding the logo.

Thanks for your help!

Hikin' Mike

I saw it. Getting ready for dinner, so I'll look at it in more details after dinner...

bamnesia

Absolutely thank you !

Hikin' Mike

Remove the edited theme 'Site Section Colors' section.

Use this CSS instead of the one I posted above.

/* Transparent Header for Home Page */
.sm-page-home.sm-user-ui .sm-page-layout > .sm-page-layout-region-header.sm-page-layout-region-pinned {
    background:rgba( 255, 255, 255, 0 );
    }

/* White (70% Opacity) Header Background */ 
.sm-user-ui .sm-page-layout > .sm-page-layout-region-header.sm-page-layout-region-pinned {
    background:rgba( 255, 255, 255, .7 );
    }

You need to re-do your logo using Photoshop or similar and upload that version for your logo.

Hikin' Mike

@bamnesia said:
Regarding my logo, smugmug will not allow me to upload a logo smaller than 500 px wide

I really doubt SM is limited you logo to 500px wide.

bamnesia

Thank you Mike. I really like what your CSS does on the desktop. For some reason it's not showing up so well on my ipad. The navigation menu is misaligned in portrait mode and it appears to be 100 percent transparent is there anyway to have a mobile menu on the ipad?

Re: logo it is a .png file. I have tried this multiple times, uploaded it to smugmug at 500 px it worked, at 350 it crops it down for some strange reason. They are both .png files resized in photoshop. Might have to shout out to smugmug help because this is very strange. Thank you so much!

Hikin' Mike

I don't have a mobile device so I can't test it. I use http://quirktools.com/screenfly/#u=https://beautifulamnesia.smugmug.com/Portfolio-Scapes&w=800&h=480&a=24&s=1 to test it and I'm not seeing any issues.

You may need to contact SM Help.

bamnesia

Will do Mike. Thank you, you have been really helpful. Appreciate it. Best wishes!

Shinrya

I've had issues with blurry logos before, appearing sharp on normal monitors and phones, but blurry on things like iPads and retina displays (e.g. Macbooks/Surface Book).

I think I the trick is to upload a much higher res version of the logo e.g. 1000px wide, and then tell SM to display it at 500px wide. Seems to come out less blurry that way for certain devices.

Hikin' Mike

@Shinrya said:
I've had issues with blurry logos before, appearing sharp on normal monitors and phones, but blurry on things like iPads and retina displays (e.g. Macbooks/Surface Book).

I think I the trick is to upload a much higher res version of the logo e.g. 1000px wide, and then tell SM to display it at 500px wide. Seems to come out less blurry that way for certain devices.

I didn't look into the why, but I noticed my logo wasn't a clear as my logo from my WordPress site....it's the same file. I ended up not using a Logo block, instead I used a HTML/CSS block as my header logo. Problem solved.

bamnesia

Thanks both, that is wonderful. I tried and that works now !

Mike I decided to change to a vertical menu bar after all that because the transparent menu horizontal wasn't displaying well on Ipads and they don't have a mobile menu on Ipads, but this is very useful information if I want to change my site design in the future.

Cheers