Support ForumResponsive Header – Logo Size and Alignment, Counters Bug – Support Forum

Responsive Header – Logo Size and Alignment, Counters Bug

CreativeWebs — Tue, 19 May 2015 19:25:42 +0000

Hello,

I’m very happy with this theme and can’t wait to put it to use! I am having several issues with the header on a smartphone: https://tinyurl.com/n323hp5

I would like the logo to be on the left with the hamburger icon on the right (logo and icon side by side with some space between them). Currently they appear stacked on my iPhone.

I would also like to be able to change the size of the logo and the hamburger, and (if possible) change the color of the hamburger.

One final issue I’m having: Notice the 4 counters below the slider. The final one is supposed to go to 1 million, but it always ends a few digits short (around 999985!). Can this be fixed?

Thanks in advance for your help!

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

IshYoBoy — Wed, 20 May 2015 08:13:25 +0000

Hey there,

1. to change icon position please try this short snippet (Theme Options -> General Options -> Custom CSS):

.ish-ph-main_nav {
	float: left !important;
}

.ish-ph-main_nav {

float: left !important;

}

2. to make icon bigger and change its color use this one:

li.ish-ph-mn-resp_menu a:before {
	font-size: 20px !important;
	color: red !important;
}

li.ish-ph-mn-resp_menu a:before {

font-size: 20px !important;

color: red !important;

}

3. to make logo smaller use this one:

.ish-ph-logo img {
	max-height: 45px !important;
}

.ish-ph-logo img {

max-height: 45px !important;

}

4. regarding counter number, thanks for pointing this to us, it’s a bug and we’re working on fix for it ;)

Let us know if all this helps
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

IshYoBoy — Wed, 20 May 2015 08:54:36 +0000

We’re back with fix for counters.

Please open the file “assets/frontend/js/main.js” and search for the functions “ish.animate_counters” on the line nr. 2382.

Replace that whole function with this new one:

/*
  * Counters animation
  */
 if ( ! function_exists( 'animate_counters' ) ) {
  ish.animate_counters = function (){

   jQuery('.ish-sc_counter:in-viewport').each(function() {
    var me = jQuery(this);
    if ( ! me.hasClass('done') ) {
     me.addClass('done');

     var counter = me.find('.ish-counter');

     // attributes from html
     var duration = me.attr('data-duration');
     var value = counter.text();

     if ( duration != undefined ) {
      duration = duration * 1000;
     } else {
      duration = 1000;
     }

     jQuery({ Counter: 0 }).animate({ Counter: counter.text() }, {
      duration: duration,
      easing: 'swing',
      step: function () {
       counter.text(Math.ceil(this.Counter));
      },
      done: function () {
       counter.text( value );
      }
     });
    }
   });

  }
 }

* Counters animation

if ( ! function_exists( 'animate_counters' ) ) {

ish.animate_counters = function (){

jQuery('.ish-sc_counter:in-viewport').each(function() {

var me = jQuery(this);

if ( ! me.hasClass('done') ) {

me.addClass('done');

var counter = me.find('.ish-counter');

// attributes from html

var duration = me.attr('data-duration');

var value = counter.text();

if ( duration != undefined ) {

duration = duration * 1000;

} else {

duration = 1000;

}

jQuery({ Counter: 0 }).animate({ Counter: counter.text() }, {

duration: duration,

easing: 'swing',

step: function () {

counter.text(Math.ceil(this.Counter));

done: function () {

counter.text( value );

}

});

}

});

}

It should help
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

CreativeWebs — Wed, 20 May 2015 14:14:00 +0000

Wow! Thank you for this amazing support! The counters are indeed fixed!

However, when I implement CSS fixes #1 and #3, the desktop site is affected as well as the smartphone site. #1 moves the main nav to the left, even on the desktop site. #3 makes the main logo smaller. And in both cases, on my phone, the logo is still above the hamburger.

I’d like to adjust these elements in the smartphone header separately from the desktop header. On a phone I’d like the logo and the hamburger directly side by side, and I’d like to be able to manipulate the size of the logo (independently from the logo in the desktop header). Is that possible?

Thank you!

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

CreativeWebs — Wed, 20 May 2015 15:30:14 +0000

I keep trying with CSS solutions from other threads, but can’t get it right on the iPhone. Can you please look at it on an iPhone? The header area is too big, the logo disappears after scrolling, etc. Thank you in advance for your help!

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

IshYoBoy — Thu, 21 May 2015 07:17:52 +0000

Hey,

To affect only the mobile view, the code needs to be nested inside a media query.

@media all and ( max-width: 480px ) {
    ...
}

@media all and ( max-width: 480px ) {

...

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

CreativeWebs — Thu, 21 May 2015 17:14:01 +0000

Hello! I’m sorry, but it’s still not right. Will you please look at it on an iPhone? Here are the issues: https://tinyurl.com/n323hp5

1. The header area is too big. I’d like to make the header area smaller on a phone.

2. The logo disappears from screen once you begin to scroll. (It just disappears and all you see in the header area is the hamburger.)

3. I still can’t get the logo to be the size I want. When I make it bigger, then the hamburger disappears.

Here is the CSS I’m using:

@media all and ( max-width: 480px ) {
.ish-ph-main_nav {
float: right;
margin: 0 auto;
}

@media all and ( max-width: 480px ) {
.ish-ph-logo {
float: left;
margin: 0 auto;
max-height: 60px;
}

Thank you!

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

IshYoBoy — Fri, 22 May 2015 08:55:09 +0000

Hey,

First of all let’s fix the invalid CSS code as it might be breaking a lot of functionality. The code is nested incorrectly. This is how it should look like:

@media all and ( max-width: 480px ) {
	.ish-ph-main_nav {
		float: right;
		margin: 0 auto;
	}

	.ish-ph-logo {
		float: left;
		margin: 0 auto;
		max-height: 60px;
	}
}

@media all and ( max-width: 480px ) {

.ish-ph-main_nav {

float: right;

margin: 0 auto;

}

.ish-ph-logo {

float: left;

margin: 0 auto;

max-height: 60px;

}

Please, fix it to avoid solving unnecessary problems ;)

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

CreativeWebs — Sat, 23 May 2015 16:56:39 +0000

Hello! I corrected the CSS. However I am still having the same issues with the iPhone screen.

1. The header area is too big. I’d like to make the header area smaller on a phone.

2. The logo disappears from screen once you begin to scroll. (It just disappears and all you see in the header area is the hamburger.)

3. I still can’t get the logo to be the size I want. When I make it bigger, then the hamburger disappears.

Please help! Thank you!

Reply To: Responsive Header – Logo Size and Alignment, Counters Bug

IshYoBoy — Mon, 25 May 2015 10:32:04 +0000

Hey,

Try the following code and if it does not fit, feel free to amend it.

@media all (max-width: 480px) {
	
	/* Change header size */
	.ish-part_header .ish-row_inner {
		height: 60px !important;
	}
	
	
	/* Align the button and logo in header on Mobile phones */
	.ish-part_header:not(.ish-sticky-scrolling) .ish-ph-logo,
	.ish-part_header:not(.ish-sticky-scrolling) .ish-ph-main_nav {
		height: 100% !important;
	}
	
	/* Display logo in sticky scrolling nav */
	.ish-part_header.ish-sticky-scrolling .ish-ph-logo {
		display: block;
	}
}

@media all (max-width: 480px) {

/* Change header size */

.ish-part_header .ish-row_inner {

height: 60px !important;

}

/* Align the button and logo in header on Mobile phones */

.ish-part_header:not(.ish-sticky-scrolling) .ish-ph-logo,

.ish-part_header:not(.ish-sticky-scrolling) .ish-ph-main_nav {

height: 100% !important;

}

/* Display logo in sticky scrolling nav */

.ish-part_header.ish-sticky-scrolling .ish-ph-logo {

display: block;

}

Unfortunately these are customisations and not part of the regular theme support which is more for problems solving or help to set up the theme correctly. If you need further help with the header we can offer our paid services for which we have a flat hourly rate. Let us know if you are interested on “hello@ishyoboy.com”

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market