Need help with some CSS tweaks for menu appearance

claudiu

Hello!

I'm trying to create a semi-transparent background for the submenu items (i.e. children under "PHOTO-ESSAYS") for both desktop/mobile.

I e-mailed this to the SmugMug Support Heroes, but they told me they are having troubles getting this to work, and they suggested me to ask this question here.

Could you please help me out with this?

Thank you very much indeed!

Claudiu

My website: falubphotography.com

Hikin' Mike

They are correct. This works on MY site using Chrome's web tools:

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui.yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children, 
.sm-user-ui .yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children {
    background: rgba( 0, 0, 0, .5 );
    }

I tried it on your site and it doesn't work. Looks like you have some conflicting code on one of your CSS widgets here:

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
    background: #212121!important
}

If you remove this, it should work if you add the code from the top code into your theme's site-wide CSS. If it doesn't work, please leave this removed:

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
    background: #212121!important
}

claudiu

Mike, thank you very much for your help!

I removed the code syntax you mentioned from the 'CSS placeholder', which I have inserted at the top of the page for the entire site, and I aded your code into my theme's site-wide CSS, but it doesn't work...

I tried also when the code in the 'CSS placeholder' is moved into my theme's site-wide CSS (i.e. I thought that having both a 'CSS placeholder' for the entire site and a theme's site-wide CSS creates some additional conflicts).

Unfortunately, this didn't work either. I assume there is some mistake in my code at a certain location, but I have no ideea where.

Should I send you my codes from the 'CSS placeholder' (located at the top of the "Entire Site" page) and my theme's site-wide CSS?

Thank you!

Hikin' Mike

No need to post your code here, I can see it using one of the web tools. I just uploaded the code into my theme's site-wide CSS and it works. There must be a conflict in your site....some place. I'll take a look again...

Hikin' Mike

Just had to add one more line. Just replace the one I posted and use this...

.sm-user-ui,
.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui.yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children, 
.sm-user-ui .yui3-menu-horizontal>.yui3-menu-children .yui3-menu-children {
    background: rgba( 0, 0, 0, .5 );
    }

Hikin' Mike

For your other question. Remove this:

@media only screen and (max-width: 767px) {
    .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: #fff;
        font-size: 43px;
        width: 45px;
        line-height: 30px;
        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: 0;
        color: #000
    }
    .sm-user-ui .sm-page-widget-nav {
        position: absolute;
        top: 0;
        right: -8px
    }
}

Use this instead. Note, you don't need the @media only screen and (max-width: 767px) { ...} because it only works on mobile ayway.

/**
* Hamburger Menu for Mobile Devices
****************************************************************/
.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';
    font-size: 48px;
    width: 48px;
    line-height: 24px;
    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: rgba( 0, 0, 0, .5 );
    }   

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
    position: absolute;
    top: -45px;/* adjust for your logo */
    right: 10px;
    z-index: 1;
    }

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img, 
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
    float: left;
    }

.sm-user-ui .sm-page-widget-logo-text-container {
    margin: 10px 0;
    }

claudiu

Mike, you are genius !!! THANK YOU!

It works now. I am still playing around with the parameters, but it's basically much, much better! I'm very happy!

I will test the code for mobile phones.

Thank you very much for your time and help!

claudiu

Mike, I tried the code for mobile. It's great!!!

How do I remove the horizontal black line all across the page when the hamburger menu is not expanded?

Thank You!

Hikin' Mike

Change this:

.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: rgba( 0, 0, 0, .5 );
    } 

To transparent or rgba( 0, 0, 0, 0 ):

.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: transparent;
    } 

claudiu

Excellent, Mike!

Thank You very much!

claudiu

Mike, one last thing:

For desktop, I'm trying to make the navbar submenu item hover background semi-transparent as well (i.e. less transparent than the background of the whole block).

I tried:

.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: rgba( 0, 0, 0, .5 )
}

but it just lightens the gray...

Moreover, could you please tell me how to remove the line all around the semi-transparent background for the submenu?

Thanks a million!

Hikin' Mike

That was a tricky too. The first one removes the default hover. As you found out it just makes it darker or lighter. Using transparent removes it so you can target another class.

/**
* Opacity for Menu Hover 
***************************************************/
.sm-user-ui .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
    background: transparent !important;
    }

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover {
    background: rgba( 0, 0, 0, .5 );
    }   

/**
* Removes Sub-Menu Border
***************************************************/    
.sm-user-ui .yui3-menu .yui3-menu-children {
    border: none;
    }

claudiu

Superb, Mike!

Thank You very much for your help! Your CSS codes above will be very helpful to other Smugmuggers as they were to me

Bests
Claudiu

Hikin' Mike

@claudiu said:
Superb, Mike!

Thank You very much for your help! Your CSS codes above will be very helpful to other Smugmuggers as they were to me

Bests
Claudiu

You're welcome. I may have to add this to my list of SM Customizations....since it took some time to figure out.

claudiu

Mike, please do so. I looked at your website and besides the exquisite landscape photographs it also contains all kind of useful info (e.g. CSS tweaks, etc.).

I might ask you at some stage how to add the "home" symbol in the lower left corner (i.e. in the same block where the social icons are for the desktop site), with a link to the cover page, but I don't want to abuse your kindness too much
You have already helped me a lot with the above codes that provided the results I was looking for.

Again, thank You very much. This site is extremely efficient!

Hikin' Mike

I added a tutorial on the semi-transparent menu last night: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Create-Semi-Transparent-Sub-Menu

Don't worry about abuse...lol! I don't have a lot to do, so I enjoy this....really. It gives me something to do.

Anyway, in your Social Icons you want to click on "Show Custom". That will allow you to add a custom URL, in this case it will be your home page. Fill in the URL and save. Add this to your CSS:

/**
* Custom Social Icons
***************************************************/
.sm-fonticon-LinkSquare:before {content: '\E317'; }

I tried it on my testing page and it works.

claudiu

Mike, thanks very much, but for some reason it doesn't work on my page.

So, I got the "reading glasses" symbol that I had already managed to insert a few days ago at the Custom URL, but then I gave up.

So, with or without the code line placed in the 'CSS placeholder' and/or my theme's site-wide CSS I always get the reading glasses on the 2nd position... If possible I would like to have the "Home" symbol instead.

Btw, can one change the order of these symbols in that block?

Many thanks for your efforts and for placing the tutorial on the semi-transparent menu on your page!

Hikin' Mike

Forgot SM offers two versions; square and circle. I use square. I added the circle and default as well...

/**
* Custom Social Icons
***************************************************/
.sm-fonticon-Link:before,
.sm-fonticon-LinkCircle:before,
.sm-fonticon-LinkSquare:before {content: '\E317'; }

claudiu

Yes, it works! Thank You, Mike!

I looked again at your landscape photographs. I love the photograph with the lighting strikes. Amazing colors.

This one: https://gallery.imagesinthebackcountry.com/North-america/i-Tp6dgrF/A

Happy shooting wherever you are, and all the best!

Hikin' Mike

I updated the code above to include the default Social Icons. I checked and there is no way to re-arrange them unless you create a custom Social Icons (I do it to match my WordPress site).

Thanks for the compliment. We don't get that type of weather here so when I had an opportunity for some lightning strikes while on vacation, I took it. Got very wet doing so, but totally worth it!