Moving the Main Menu from below logo to beside logo

[sharonq]

Jason:

Can you give me some insight into how the menu location works. I would like to move the main menu up beside the header into the themeblvd_header_addon area.

Do I do this by moving: themeblvd_header_content_default from themeblvd_header_menu to themeblvd_header_addon (and if so how…)

or do I move the themeblvd_header_menu into the space where there currently is themeblvd_header_addon ? (and again – how would I do that?)

or is there better way to move the menu?

Hooks reference (just so I remember who goes where)

themeblvd_header_content
– Description: Main content area of the header, default function calls themeblvd_header_logo and themeblvd_header_addon here.
– Default function: themeblvd_header_content_default
themeblvd_header_logo
– Description: Website logo, called in themeblvd_header_content by default.
– Default function: themeblvd_header_logo_default
themeblvd_header_addon
– Description: Additional area within default themeblvd_header_content.
– No default hooked function by framework
themeblvd_header_menu
– Description: Main menu below content of header.
– Default function: themeblvd_header_content_default

Topic

[Jason Bobich]

There are several ways you could accomplish it, but there’s not going to be any simple 1-steppers that are going to put the menu exactly where you want it. You need to hook the menu where you want and then style it to work in that location.

If you’re uncomfortable creating your own function that contains wp_nav_menu to output your menu location, you could just use the theme’s default function and move it.

You can look at the action map, but I’d imagine the logical place to put it would be the “themeblvd_header_addon” hook.

// 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' );

But that’s just going to get the HTML markup in the right place. From there, you’re still going to have to style everything to be positioned where you want with CSS.

[Jason Bobich]

From looking at what you’re pasting, it appears there’s a typo in the documentation:

themeblvd_header_menu
– Description: Main menu below content of header.
– Default function: themeblvd_header_content_default

The default function listed there should be “themeblvd_header_menu_default” — That may be where your confusion is coming from I think.

[sharonq]

Thank you Jason – that is what I needed to know (and you were right – that was what was confusing me).

Your menu is working fine beside the logo – though when I switch to UberMenu it adds a background that fills the full width and height of the header and covers the logo – I’ll check in with the menu dev to see if I can sort out the CSS to fix it.

Sharon

[sharonq]

Looking deeper the problem might be with ‘#Access” that seems to be styling the header background to match the background of the menu. I now have Ubermenu turned off and my header area background is white the same as the menu – the menu looks fine if the background is transparent but seems to pick up the background of the menu.

This is the html:

<a href="http://teamsfirst.ca">Home</a>
<a href="#">Search For<i></i></a>

	<a href="#">Activities<i></i></a>
	
		<a href="http://backup.teamsfirst.ca/find-an-indoor-program/">Indoor Activity</a>
		<a href="http://backup.teamsfirst.ca/find-an-outdoor-program/">Outdoor Activity</a>
		<a href="#">Leadership Activity</a>
	

	<a href="#">Development<i></i></a>
	
		<a href="#">Leadership Development</a>
		<a href="#">Team Startup</a>
		<a href="#">Assessment</a>
	

	<a href="#">Virtual Teams<i></i></a>
	
		<a href="#">Intranet Resources</a>
		<a href="#">Aps and Websites</a>
	

	<a href="http://backup.teamsfirst.ca/venues/">Venues<i></i></a>
	
		<a href="#">Hotels</a>
		<a href="#">Conference Centre</a>
		<a href="#">Exotic Destinations</a>
	

	<a href="#">Event Management<i></i></a>
	
		<a href="#">Event Managers</a>
		<a href="#">Facilitators</a>
		<a href="#">Large Group Activities</a>
		<a href="#">Keynotes</a>
	

	<a href="#">Learning<i></i></a>
	
		<a href="#">Learning</a>
		<a href="#">Webinars</a>
		<a href="#">Workshops</a>
		<a href="#">Books</a>
	



<a href="http://backup.teamsfirst.ca/contact-us-2/">Contact Us</a>
<a href="#">News<i></i></a>

	<a href="http://backup.teamsfirst.ca/category/front_page/">News</a>


<a href="http://backup.teamsfirst.ca/wp-login.php?action=logout&_wpnonce=375851834c">Log Out</a>

How do I tell “access” to stay within themeblvd_header_addon? It seems to want to add a background to the header container.

• This reply was modified 10 years, 5 months ago by sharonq.

[sharonq]

I am working on my development site: http://backup.teamsfirst.ca/

• This reply was modified 10 years, 5 months ago by sharonq.
• This reply was modified 10 years, 5 months ago by sharonq.

[sharonq]

These are the DIVs that seem to impact:

I can see that access is linked to Navigation – which makes sense except how to I tell access where the menu is?
Is there a doc that talks about access?

</div

[sharonq]

Just to close the loop – in case anyone else is trying to create a menu beside the header. I needed adjust the #access CSS to match the contatainer:

#access: {
min-width: 600px;
max-width: 600px;
float: right; }

For some reason this did not work at the end of style.css but it did work when I added it to the existing #access

[Jason Bobich]

Possibly because you have a colon after the “#access” selector?

It should be:

#access {
	min-width: 600px; 
	max-width: 600px;
	float: right; 
}

[sharonq]

(smacks head… that could be the problem….) Perhaps it is time for new glassess…

[Author]

Replies