how can i move main nav in curb appeal next to logo?

[David Leary]

#2671

i have attached a screenshot of a crude example. basically i want to shrink the top header area and would like to move the main nav next to the logo. the problem is i am relatively new to wordpress (been Drupal developer for years) and it is very unclear to me where in the equity theme and child theme curb appeal the menu is generated. typically i would just move the div that includes the main menu into the div for the header and then clean up with CSS. but it is very fragmented with lots of php functions.

Attachments:

You must be logged in to view attached files.

(+1 rating, 1 votes, rated)
You need to be a registered member to rate this post.

Loading...

[David Leary]

#2676

solution: way too convoluted and difficult but its done. all changes are done on the equity theme level.

first, you need to edit the theme’s function.php file to add the menu location to the GUI … this link explains it: https://codex.wordpress.org/Navigation_Menus … for me i named the location “Logo Menu”

then, you need to edit lib/framework/header.php … you basically need to write an almost complete function to generate your menu so that it points to your new menu location you created and so that it inherits the correct styling and CSS just like the main nav. so in the function equity_do_header() you need to paste something like the following:

equity_markup( array(
		'html5'   => '<div class="nav-menu-center columns small-12 large-65"><nav %s data-topbar>',
		'context' => 'nav-main',
	) );
	echo '<ul class="title-area"><li class="name"></li><li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li></ul><section class="top-bar-section">';
	if ( has_nav_menu( 'logo-menu' ) ) {
			equity_nav_menu( array(
				'theme_location' => 'logo-menu',
				'menu_class'     => 'menu equity-nav-menu menu-top-header left',
				'walker'         => new Top_Bar_Walker,
			), false );
	echo '</section></nav></div>';
		}

i struggled greatly with the correct location to add this code segment. you could write your own function and do a add_action( 'equity_header', 'test_header_item' ); but then the menu shows up outside the div wrapper i wanted it to be in. getting the div order correct is crucial so you can simply float them and have them look normal at full size or mobile size. a few important things to point out. the equity markup is crucial for styling along with the echo ul line. i called my menu and menu location “logo-menu” but that could be anything. i also gave the div a class called large-65. which brings me to the final styling requirements to make mine work. the header uses columns that have classes based on size of window. i wrote my own CSS so that the top header is basically 20% 65% 15% (at full screen). on mobile, it is the same as the default. therefore the logo is 20% wide, the menu is 65% wide, and the contact info is 15% wide.

/* custom column width for header */
@media only screen and (min-width: 64.063em) {
    .large-15 {
        width: 15%;
    }
    .large-20 {
        width: 20%;
    }
    .large-65 {
        width: 65%;
        padding: 10px 10px 10px 15px;
    }
}

now, the final, really obscure place to edit. go edit lib/functions/markup.php … this file has attributes and classes for most items in the theme. it was here that i edited the title width to be 20%:

function equity_attributes_title_area( $attributes ) {

	$attributes['class'] .= ' columns small-12 large-20';

	return $attributes;

}

and the header widget (contact info top right of site) to be 15%:

function equity_attributes_header_widget_area( $attributes ) {

	$attributes['class'] .= ' widget-area columns small-12 large-15';

	return $attributes;

}

this is by far the most work i have ever done to do something like move a website main nav. good news is doing it this way you can revert back by simply selecting a menu for main menu location in the GUI and not selecting any menu in the logo menu location. just be sure to add an if statement.

(+1 rating, 1 votes, rated)
You need to be a registered member to rate this post.

Loading...

[Author]

Posts