Hi @odyssean. ??
It is possible to add the primary menu to the main section of your header, however, the steps involved will require you to experiment a little with the theme’s HTML, PHP, and CSS.
If you’re up for the challenge then the first step is for you to set up a child theme.
The following guides provide a good introduction to child themes, including steps to set one up:
After you have completed that step, copy the parent’s sidebar.php and header.php</strong files to your child theme’s directory and open them in your favourite text/code editor.
Let’s start with sidebar.php. This is where the code that defines the layout of everything that appears on the theme’s slide out panel lives. In particular, the following part defines the menu:
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-heading"><?php _e( 'Menu', 'espied' ); ?></h1>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
Remove that code from the sidebar.php in order to remove your menu from the panel.
Next, move to header.php. The following part of the code in this file is what outputs the theme’s title and description:
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" tabindex="11"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
</header><!-- #masthead -->
Paste the code for the menu just below the description in order for it to display in the header. Like so:
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" tabindex="11"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-heading"><?php _e( 'Menu', 'espied' ); ?></h1>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
After you have added the menu to the header, you will need to style it with CSS to get it to look as you wish.
I tested the above on my own set up of Espied, and added the following to my site’s style.css file as a starting point:
.site-header #site-navigation, #menu-all-pages {
width: 100%;
}
.site-header .main-navigation ul li {
display: inline-block;
width: 24%;
}
The above CSS is only a starting point, though, and will need to be tweaked to work across mobile, etc.
Let me know how you get on with that!
As an extra note: Please post to the Espied theme’s sub forum for future questions:
https://www.ads-software.com/support/theme/espied
Your question is less likely to pass us by and likely to get a quicker answer if it’s posted directly there. ??
Thanks!
