How to add responsive elements right of logo?

[msiep]

I’d like to add a widget for my tagline, and a search box, and possibly other things (e.g. things like the social icons that your Alesyka theme includes) to the right of my logo, with responsive options so, for example the tagline can move beneath the logo on narrower screens, and the search box can perhaps disappear or be replaced by a small icon, etc. What’s the best way to do this? I want it to apply globally throughout the site, so the Layout Builder doesn’t seem to be appropriate for this, correct?

Topic

[Jason Bobich]

Hello,

To get your HTML outputted you’d utilize actions to hook your content in wherever you want from your child theme’s functions.php.

http://dev.themeblvd.com/tutorial/actions/

http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/

So, by looking at the action map just linked to, a logical place for you would be to hook to “themeblvd_header_addon” —

function my_header_addon() {
    ?>
    All of your HTML here...
    <?php
}
add_action( 'themeblvd_header_addon', 'my_header_addon' );

==============

From there, you’re just styling everything from your child theme’s style.css, to get everything positioned the way you want at whatever viewport size.

In responsive design, we use what are called @media queries to style the elements different as we move up (or down) in viewport sizes. Specifically in our themes, what we do is style for the desktop version, and then as the viewport (i.e. screen size or browser window) becomes smaller, we make style adjustments with @media queries targeting these viewport size ranges.

However, when you come in and make your style changes, you’re now resetting things and setting up this section for the desktop. But now you also need to work your way down and make your CSS customizations for the smaller viewport sizes.

Here’s an example of how you might structure your CSS changes (just one possible way):

/* Desktops (i.e. every where) */
.whatever {
	...
}
.whatever-else {
	...
}

/* Tablets -- override anything you did above here */
@media (max-width: 979px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

/* Mobile -- override anything you did above here */
@media (max-width: 767px) {	
	.whatever {
		...	
	}
	.whatever-else {
		...
	}
}

Note that we also have preset responsive utility classes you can work into your HTML markup, if you want to quickly show/hide chunks of HTML depending on the viewport size.

http://dev.themeblvd.com/tutorial/responsive-utility-classes/

[msiep]

Thank you! This is very helpful. Sorry for my delayed response. For some reason I didn’t get an email notification of your reply so didn’t see it until just now.

[Author]

Replies