Logo and nave bar issue on mobile devices

Sparkling
1

Hi Alan here, love your theme, The Zelandonii Theme is a child theme of the Sparkling theme, i have modified for the use of our gaming community website, the theme is focused on the popular MMORPG game World of Warcraft. it all work fine apart when looking at the site from a mobile device the nave bar go under the logo, i would like it so the nave bar is the top and log under the nave bar, any help pleas, the site it under a spare domain i had while i build it http://cetusfishing.co.uk/. (some of the content on there is just to see how it lays out)

Again thank you for your theme and any help with the small minor issue i have would be great full, but no problems if it cant.

Alan

2

ie, this is the view from an ipad

3

Hi Alan,

I hope you are well today and thank you for your question.

You can achieve this by overwriting the header.php file of sparkling theme in your child theme and changing the in it as following.

Before Editing : 


<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>

	<?php if( get_header_image() != '' ) : ?>

	<div id="logo">
		<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>
	</div><!-- end of #logo -->

	<?php endif; // header image was removed ?>

	<?php if( !get_header_image() ) : ?>

	<div id="logo">
		<span 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></span>
	</div><!-- end of #logo -->

	<?php endif; // header image was removed (again) ?>

</div>
<?php sparkling_header_menu(); // main navigation ?>

After Editing : 


<?php sparkling_header_menu(); // main navigation ?>
<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>

	<?php if( get_header_image() != '' ) : ?>

	<div id="logo">
		<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>
	</div><!-- end of #logo -->

	<?php endif; // header image was removed ?>

	<?php if( !get_header_image() ) : ?>

	<div id="logo">
		<span 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></span>
	</div><!-- end of #logo -->

	<?php endif; // header image was removed (again) ?>

</div>

Best Regards,
Movin