This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Change logo size

  • Creator
    Topic
  • #8983
    mark
    Participant

    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Author
    Replies
  • #8998
    Jason Bobich
    Keymaster

    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.

    #9009
    mark
    Participant

    cool, thanks Jason

Viewing 2 replies - 1 through 2 (of 2 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.