Social Media Icons in header, aligned right

Sparkling
1

Hello,

I have aligned navigation to the left in sparkling header:

I would like to show my social icons aligned to the right of the header:

<?php sparkling_social(); ?>

Can you help please?

Thanks,

Simon.

2

I’m unable to test this out right now, but this may get you headed in the right direction. Create the file header.php in your child theme, and add the code below. You may have to make some css and/or media edits.

<?php
/* *
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package sparkling
 */

if ( isset( $_SERVER['HTTP_USER_AGENT'] ) && (strpos( $_SERVER['HTTP_USER_AGENT'], 'MSIE' ) !== false) ) { header( 'X-UA-Compatible: IE=edge,chrome=1' );
} ?>
<!doctype html>
<!--[if !IE]>
<html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>
<html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="<?php echo of_get_option( 'nav_bg_color' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		<nav class="navbar navbar-default <?php if ( of_get_option( 'sticky_header' ) ) { echo 'navbar-fixed-top';} ?>" role="navigation">
			<div class="container">
				<div class="row">
					<div class="site-navigation-inner col-md-9">
						<div class="navbar-header">
							<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
								<span class="sr-only">Toggle navigation</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>

														<div id="logo">
															<?php if ( get_header_image() != '' ) { ?>
																	<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>"  height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
																		<?php if ( is_home() ) { ?>
																		<h1 class="site-name hide-site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
																	<?php }
} else {
	echo is_home() ?  '<h1 class="site-name">' : '<p class="site-name">'; ?>
																		<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
																<?php echo is_home() ?  '</h1>' : '</p>'; ?>
															<?php } ?>
														</div><!-- end of #logo -->
						</div>
						<?php sparkling_header_menu(); // main navigation ?>
					</div>
					<div class="col-md-3">
						<?php if ( of_get_option( 'footer_social' ) ) { sparkling_social_icons();} ?>
					</div>
				</div>
			</div>
		</nav><!-- .site-navigation -->
	</header><!-- #masthead -->

	<div id="content" class="site-content">

		<div class="top-section">
			<?php sparkling_featured_slider(); ?>
			<?php sparkling_call_for_action(); ?>
		</div>

		<div class="container main-content-area">
			<?php $layout_class = get_layout_class(); ?>
			<div class="row <?php echo $layout_class; ?>">
				<div class="main-content-inner <?php echo sparkling_main_content_bootstrap_classes(); ?>">
3

@packerlandwebsites I hope you are well today and thanks for helping out here in this forum.

Your help here is really appreciated.

4

@Simon Have you tried using the solution shared above?

5

Hello movin, I tried the solution above and indeed it shows the social icons but they show under the menu and in mobile view they show out from the menu button
Is it possible to align them to the right side of the menu and inside it?
I also tried the solutions presented here https://colorlibsupport.com/t/align-social-icons-at-the-top-next-to-menu-names/ using the plugins, which brings the social icons into the menu (better solution) but I still dont know how to align them to the right!
If you could help it would be great!!

6

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?