How to get two menus in header to align to the right with padding?

  • Resolved Hoi Sze Lam

    (@hoiszelam)


    8 years, 10 months ago

    Just wondering how to get two menus: header-menu and social-menu to sit above and below each other to the middle-right of the header?

    I’ve created a custom menu in functions.php for social icons with this code.

    function register_my_menus() {
  register_nav_menus(
    array(
      'footer-menu' => __( 'Footer Menu' ),
  <strong>    'social-menu' => __( 'Social Menu' )</strong>
    )
  );
}
add_action( 'init', 'register_my_menus' );

    Then I have inserted it into the header here:

    </div>
<strong><?wp_nav_menu( array( 'theme_location' => 'social-menu', 'container_class' => 'social_menu_class' ) ); ?></strong>
		<?php if ( has_nav_menu( 'primary-menu' ) ) { ?>
		<nav id="primary-nav" class="primary-nav" role="navigation">
			<?php
				wp_nav_menu( array(
					'container'      => false,
					'theme_location' => 'primary-menu',
				) );
			?>
		</nav>
		<?php } ?>
	</div>

    How then do I get the two menus to align to the middle-right above and below each other? Whilst having the background colour match the original header colour?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Paolo

    (@paoltaia)

    Hi,

    please provide a link and we will provide the CSS needed to do so.

    Thanks

    Thread Starter Hoi Sze Lam

    (@hoiszelam)

    Hi Paolo,

    The link is for https://www.coffico.com

    Cheers,
    Hoi-Sze

    Thread Starter Hoi Sze Lam

    (@hoiszelam)

    P.S. When you visit the site, sometimes it links back to the old Sydney theme – if you could let me know how this could be fixed that would be much appreciated.

    You need to reload the site several times before it hits the right homepage.

    Hi Hoi Sze Lam,

    I have created a child theme to help you.

    https://github.com/mistergiri/directory-starter-child

    Follow my instructions.

    Remove your existing code from header.php
    I mean this part.

    <?php wp_nav_menu( array( 'theme_location' => 'social-menu', 'container_class' => 'social_menu_class' ) ); ?>

    Then copy line number 31 to 58 to your child theme from this file

    https://github.com/mistergiri/directory-starter-child/blob/master/functions.php

    Copy all the styles from this style.css to your child theme style.css

    https://github.com/mistergiri/directory-starter-child/blob/master/style.css

    In your website font-awesome files are loaded by 3 times.

    One by Geodirectory.
    One by Resposive jquery slider
    and One more by your child theme I guess.

    Geodirectory already has font awesome and its loaded by default. So you don’t have to load them one more time.

    For menu text, use this syntax

    <i class="fa fa-google-plus"></i><span class="fa-hidden">Google+</span>

    Let me know how this goes

    Thread Starter Hoi Sze Lam

    (@hoiszelam)

    Hi Viruthagiri,

    Thanks for getting back to me and going to all the trouble of creating a child theme for me. It’s really appreciated.

    Though I have tested out your child theme but the installation shows up with an Internal Server Error, I proceeded to ask my webhost about the issue and they said the file is corrupt.

    I understand that it’s usually quite a simple process.

    Anyway, I’ve chosen I paid theme for now, let me know when you update the footer in the theme updates and I may give the starter pack another go.

    Thanks so much for your help!

    Best,
    Hoi-Sze

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to get two menus in header to align to the right with padding?’ is closed to new replies.