Header Cutting Off Content & Logo Size

CasperBlackwell

Hello,

The header on this site is acting odd when it's in between normal view and mobile view.  The header is cutting off page content (see picture link below) and the logo is very small. Is there a way to correct this? 

Site: http://m40.siteground.biz/~heartcor/sageheart.ca/

 

Picture: http://m40.siteground.biz/~heartcor/sageheart.ca/wp-content/uploads/2015/05/headersh.png

Thanks,

Casper

Albert

Hi,

to increase logo size, please use below css:

#Header_creative #Top_bar .logo #logo img { max-height: 100px; }
#Header_creative #Top_bar .logo { margin-top: 20px !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

CasperBlackwell

Thanks for the logo CSS.

What is the best way to deal with the header cutting off the top part of the pages when screen width is in the range of ~1228px and ~765px wide (between full screen with left side menu and a true mobile menu). 

Adjust the header size, and/or the triggers for mobile and full screen menu?

Thanks in advance,

Casper

Albert

It depends on you what you exactly want to do. But definitely you must use @media only screens css for this. You can check under responsive.css file how this looks like.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

CasperBlackwell

I did a media query and that fixed things up

Cheers,

Casper