How to Adjust Header size

CHRISRIEFENBERG

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

Hikin' Mike

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

CHRISRIEFENBERG

Hey Mike thanks for the info!

CHRISRIEFENBERG

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' Mike

/**
* 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;

    }

}

CHRISRIEFENBERG

Perfect, thanks.a lot Mike!

Problem and topic solved