Change logo size

[mark]

Hi there,

I would like to change the header logo size when the responsive navigation come on.

Currently the logo appears the same size and in the middle of the screen.
I would like to create much smaller logo and align in a header bar, with the social links, so that the content of the page is visible on the first page on smaller devices (phones etc)

How would be best to do this ?
I have found some interesting articles using ResonsiveJS or is there another preferred method in these themes.

many thanks

Mark

Mark

Topic

[Jason Bobich]

This will be a CSS Customization you’ll need to make to the theme. This theme’s approach to responsive design is essentially to target certain @media viewports sizes. So for example, if you want to style something just for mobile, it would look like this in your Custom CSS:

/* Mobile */
@media (max-width: 480px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

You could even copy the theme’s Header CSS for mobile to your Child theme’s custom.css as a starting point to edit if you want. This is copied from /assets/css/responsive.css —

@media (max-width: 480px) {
	/* Header */
	.mobile_nav_select select {background:#ffffff;border:none;color:#000000;}
	#header_content, #access .container { padding:0; }
	#branding .header_logo {float:none;margin-bottom:10px;text-align:center;}
	#branding .header_logo .tb-image-logo img {display:inline;}
	#branding .header-addon {margin:0;position:static;}
	#branding .header-addon-with-text {margin:0;}
	#branding .header-text {text-align:center;}
	#branding .social-media {margin:0;position:static;text-align:center;}
	#branding .themeblvd-contact-bar ul {float:none;}
	#branding .themeblvd-contact-bar li {display:inline-block;float:none;}
	#menu-wrapper { padding:0 0 20px 0;text-align:center; }
	#main-top { display:none; }
	#main-menu { display:none; }
	#main-menu #menu-inner .menu a {font-size:11px;font-weight:bold;line-height:11px;padding:15px 20px;}
	.responsive-nav { display:block; }
	.tb-jump-menu { background:#ffffff;color: #333333; }
}

====

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[mark]

cool, thanks Jason

[Author]

Replies