Need help with some CSS tweaks for menu appearance

claudiuclaudiu Registered Users Posts: 12 Big grins
edited January 24, 2018 in SmugMug Customization
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

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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
    }
    
  • claudiuclaudiu Registered Users Posts: 12 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
        }
    
    
  • claudiuclaudiu Registered Users Posts: 12 Big grins
    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!
  • claudiuclaudiu Registered Users Posts: 12 Big grins
    edited January 22, 2018
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited January 22, 2018

    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;
        } 
    
  • claudiuclaudiu Registered Users Posts: 12 Big grins
    Excellent, Mike!

    Thank You very much!
  • claudiuclaudiu Registered Users Posts: 12 Big grins
    edited January 23, 2018

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
        }
    
  • claudiuclaudiu Registered Users Posts: 12 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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. B)

  • claudiuclaudiu Registered Users Posts: 12 Big grins
    edited January 24, 2018

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • claudiuclaudiu Registered Users Posts: 12 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited January 24, 2018

    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'; }
    
  • claudiuclaudiu Registered Users Posts: 12 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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!

Sign In or Register to comment.