Reply To: Error on mobile responsiveness

[Support]

Hello, thanks now it’s working.

I want to have logo and text combinations. For example: logo blue + text white/ logo dark + text white/ logo black + text black.

Currently is possible define only two types of color scheme: Light and Dark.

Here’s where you define logo light and dark:

The texts color is defined on each section HTML code:

* Possible values currently are dark or light.
* Note the texts color changes only on large screens. At mobile devices the texts do not change, since this demo was designed with no need change texts color on mobile, since it already has a white background.

Some pages have scroll a tiny scroll instead of changing page (3 + 6 page)

Sorry but we couldn’t reproduce this issue. Can you please send us a short video showing the issue ?

Sometimes the logo changes twices so it starts blue and than it changes to black.

We were able to reproduce this issue. Sorry for that. You can easily fix that by adding a single line of code at js/theme.js file, like in the image below:

$(window).trigger('section.scroll.change.header.color');

This fix will be included in the next version of Porto.

While responsive the color logo changes :/ not cool

Please note this demo was designed to change logo color even on mobile screens. I saw you are adding a custom white background on entire header:

Note this background did not comes from Porto code. This demo was designed for the behavior below:

My suggestion for you is remove this white background.

An alternative is hide the current logo on mobile only and create a new HTML logo image that will appear only on mobile. For example:

<a href="index.html">
	<img alt="Porto" width="82" height="40" src="img/logo-default-slim-dark.png" />
</a>
<div class="header-logo d-none d-lg-block">
	<a href="index.html">
		<img alt="Porto" width="82" height="40" src="img/logo-default-slim-dark.png" />
	</a>
</div>

The 6 page on responsive some content disappears

We were able to reproduce this issue only on third page:

The reason is the lazy load in the image. The custom JS code below should fix this issue:

(js/custom.js):

$('img.lazyload').on('lazyloaded', function(){
	$(window).trigger('resize');
});

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---