How to Adjust Header size

CHRISRIEFENBERGCHRISRIEFENBERG Registered Users Posts: 26 Big grins
edited November 21, 2017 in SmugMug Support

Hello,

I m using a copy of the Sierra Theme for my website. I´d like to change the height of the transparent header. Its a bit to wide for my taste. I can´t find other adjustments than header opacity and color. I assume a css code should do the trick. Does anyone know the code?

Also I dont like that the page is scrollable on web and mobile (the image is fixed but if i scroll over the homepage there s a gap between the header and the image if I scroll around) Hope its clear how I meant it.

The website is www.chrisriefenberg.com. (it only effects the slideshow (homepage)).

Thanks in advance.

Chris

Comments

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

    Your logo sets the height of your header. Currently your logo is 135px x 135px.

  • CHRISRIEFENBERGCHRISRIEFENBERG Registered Users Posts: 26 Big grins
    edited November 23, 2017

    Hey Mike thanks for the info!

  • CHRISRIEFENBERGCHRISRIEFENBERG Registered Users Posts: 26 Big grins
    edited November 23, 2017

    Hey Mike,

    I found my mistake. I made the png file with a big boarder. So thats why it looked that way. I m quite happy with it now thanks to your advice. There is one last thing now I would like to change.

    Is it possible to display the logo smaller when the website is displayed on a mobile? I already have the hamburger code for mobile but I find the logo a little to big. I guess it is just one or two additional lines in the css code in order to adjust the logo when displayed on mobile devices?

    Here is the code that I use for the hamburger menu:

    @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: 55px;
        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;
        }
    

    @}/* close @media rule */

    Thanks heaps in advance

    Chris

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    /**
    * Reduce Logo for Mobile
    ***************************************************/    
    @media screen and ( max-width: 736px ) {
    
        .sm-page-widget-logo .sm-page-widget-logo-img, 
        .sm-page-widget-logo .sm-page-widget-logo-img-retina {
            height: 30px !important;
    
        }
    
    }
    
  • CHRISRIEFENBERGCHRISRIEFENBERG Registered Users Posts: 26 Big grins

    Perfect, thanks.a lot Mike!

    Problem and topic solved :)

Sign In or Register to comment.