Placing Logo – Menu – Join Mail List and Social Icons All Together in Header

[magicss]

I am having trouble learning how to place the Menu to the right of the Logo followed by a Join our Mailing List, and a Social Icon Area.
Looking here:
http://support.themeblvd.com/forums/topic/moving-the-main-menu-from-below-logo-to-beside-logo/
I did this:

// Remove default menu from “themeblvd_header_menu” action
remove_action( ‘themeblvd_header_menu’, ‘themeblvd_header_menu_default’ );

// Add default menu function to “themeblvd_header_addon” action
add_action( ‘themeblvd_header_addon’, ‘themeblvd_header_menu_default’ );

And then I tried to hack the CSS. (I am using the default Child Theme on Jumpstart.)
Floating the Menu to the Right seems to be a problem when I change to the smaller screen.
And I want to display more than just the Logo and the Menu in this Area.
Once I have the Logo to the Left, and the Menu to the right of it, I want to show — just above the menu — a “sign up for our email list form,” and then — just to the right of the form — I would like to place the Social Icons.
Then I would like to make these 4 items line up vertically when the screen size changes to small.
I can find a good example of this but it is not using our Framework and it is not Responsive.

Here is the pretty nice example that is not Responsive: http://www.girlchoir.org/

Can we stay Responsive with 4 items in an area? Is this something that can be controlled?
This would make a great tutorial. Can you help me please?
-SS

Topic

[Jason Bobich]

Hello SS,

When you make your CSS customizations, you just need to style them for the different viewport sizes. In your style.css file, these are the parts that you see @media targeting the various viewport sizes.

Example structure:

/* Standard Desktop */
.whatever {

}
.whatever-else {

}

/* Tablets */
@media (max-width: 768px) {
	.whatever {

	}
	.whatever-else {

	}
}

/* Mobile */
@media (max-width: 515px) {
	.whatever {

	}
	.whatever-else {

	}
}

[magicss]

The Standard, Tablets and Mobile @media system works once I learn and understand how to control the items with CSS which I am learning. It takes a long time.

What I am also learning is that the
function themeblvd_header_addon adds an element into that area along with a previously added element. I gather it does not replace, but adds.

For example after removing the default menu from its default area I did the add_action:
add_action( ‘themeblvd_header_addon’, ‘themeblvd_header_menu_default’ );

and then I did this 2nd add_action:
add_action( ‘themeblvd_header_addon’, ‘my_header_content’ );

And then both the Menu and the Widget — placed from the function my_header_content() — were inside the area to the right of the Logo (the header_addon area).

I know it is super easy for more experienced hackers, but it would be useful to read a tutorial showing how these functions, actions, areas, widgets, menus, logos and more can be controlled in greater depth, with examples of what to do if one is trying to manipulate three or four of these at once in combinations.

[Jason Bobich]

This is really all just the basic WordPress concept of action hooks. An action hook is simply a place in the code where something executes. You can then attach your own function to execute at those different points in the application. It sort of sounds like you’re focusing mostly on what you see as the result on your site instead of thinking in terms of where in the HTML markup are these things being inserted and outputted. This is why you really need a strong udnerstanding of HTML and CSS in order to progress into the PHP and WP development you’re doing here.

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

http://dev.themeblvd.com/tutorial/the-wordpress-functions-you-need-to-know/

http://codex.wordpress.org/Plugin_API#Actions

http://codex.wordpress.org/Function_Reference/add_action

You want to do custom development without having to pay a developer, that is great, and I commend you. But realistically, there’s just not going to be a simple answer or tutorial for you. You need to learn PHP, CSS, HTML, and how to develop for WordPress; there’s just no way around it. So far, most of what you’ve been posting about is just general things related to WP, action hooks, and CSS. There truly are unlimited resources available out there.

I know it is super easy for more experienced hackers, but it would be useful to read a tutorial showing how these functions, actions, areas, widgets, menus, logos and more can be controlled in greater depth, with examples of what to do if one is trying to manipulate three or four of these at once in combinations.

One thing you can do also if you really want to understand where specifically the theme is putting these action hooks. Not only look at this page, but take a look under the hood, and take a peak at this file of Jump Start:

/framework/frontend/functions/display.php

[magicss]

Will do, Your themes and way of thinking about WordPress (for example using Category select-able Post Grids) has inspired me to move from hacker to developer.

[Jason Bobich]

That’s awesome to hear!

And also just to be clear, as time goes on, there will be more articles and tutorials for Jump Start with more specific tips and tricks, and there will be more sample child theme examples, etc. I definitely understand the need for that.

[Author]

Replies