[Michael]

How do I enlarge the logo to actual image size 0f 450 x 134 px?

http://ilike512.com/lacoba/

[Sakin]

@Michael: You can add the following css in “Appearance => Theme Options => Custom CSS” box.

#masthead.fixed-header #site-logo img {
    max-height: 134px;
}

[Sakin]

@Michael: I also see that you have directly edit files inside adventurous-pro theme directory. Please don’t do that, as all the edits inside adventurous-pro theme will be reverted back to original when you update the theme.

To change the images in the slider, you just select Featured Image slider and add it which is shown in http://catchthemes.com/blog/videos-blog/video-series-adding-featured-image-slider/ and further you can see detail theme instructions at http://catchthemes.com/theme-instructions/adventurous-pro/

[John]

Hey Sakin, I’m having similiar issues. I used the above code, but it only takes effect when a page is scrolled down and the header is floating over the rest of the page. How do I make the logo bigger all the time?

I also notice that the menu jumps to top v-alignment from being centered when the logo shifts to the size I specify with your above css. How do I keep it centered?

Is there also a way to get the secondary menu to float right below the header menu when the page is scrolled? (Here is the site…I would like the black menu to stay up where it is under the white menu when scrolled).

Thanks for the help! This forum and your quick responses have been great. They’ve answered all my other questions…

[Sakin]

@John: I see that you have following css in your custom css:

#masthead.fixed-header #site-logo img {
    max-height: 60px;
    padding-top: 1px;
    padding-bottom: 1px;
}

Replace that with the following css:

#site-logo img,
#masthead.fixed-header #site-logo img {
    max-height: 60px;
}

Further, add the following css in “Appearance => Theme Options => Custom CSS” box.

#masthead.fixed-header {
    padding-top: 15px;
}
.fixed-header #header-right,
#header-right {
    float: right;
    padding-top: 15px;
}

[John]

That worked perfect! Thanks again!

[saremcdee]

Hi Sakin, I’m having the same problem here. I used the code that you listed above and it changed the size of the logo (bigger) when scrolling but not when you land on the page (still small). Can you help? Cheers

[saremcdee]

oops, this is the website
openroadtravelperu.com

[Sakin]

@saremcdee: I check in your site and see that you have added in the following css in your Custom CSS box:

#masthead.fixed-header #site-logo img {
    max-height: 100px;
}

You can replace that CSS with the following CSS:

#site-logo img,
#masthead.fixed-header #site-logo img {
    max-height: 100px;
}

[Kim]

Hi Sakin – I have followed the above post instructions, works great but I experience a stickiness on the iPhone and the header then covers the slideshow. Is there a way to fix this? It also does it on newer versions of Safari on the Mac as well. fixingyoubooks.com/wp-content/uploads/2014/12/HeaderLogoIssueSafari.jpg

[Sakin]

@Kim: So what you want to do with that. If you like that large header in your mobile, then you can replace your css with the following css:

#site-logo img, #masthead.fixed-header #site-logo img {
    max-height: 100px !important;
}

[Kim]

Hi Sakin –

Thanks for the quick reply! Actually, the desired result for me would be just the opposite – I would like the smaller logo to appear on mobile so that the header doesn’t cover up my slideshow at the top on the mobile phone or on smaller screens. What seems to be happening as that having the larger logo the header doesn’t retract properly on scroll up. Would you be able to test now on a device? I have added the code above.

[Sakin]

@Kim: To make you logo small in mobile then you can add the following css:

@media screen and (max-width: 980px) {	
    #masthead #site-logo img, 
    #masthead.fixed-header #site-logo img {
        max-height: 28px;
    }
}

[Author]

Posts