Logo Size and Homepage Image Overlay Removal

[asiimwefx]

Hi,

I would like to:
1. remove the blue overlay effect from homepage slider images (theme file name: index-classic-color.html), and display the image in its original state with superimposed text;

2. prevent the theme from resizing the logo to preset size so that the logo displays in its original dimensions. Original logo can be seen at: https://aircooluganda.com/AirCoolUganda_ver1.0_Dec_2020/img/logo.png

Link to draft website: https://aircooluganda.com/AirCoolUganda_ver1.0_Dec_2020/index.html

How can I make these changes?

---

[Support]

Hello, thanks for your purchase.

1) Remove the class overlay overlay-color-primary overlay-show overlay-op-8 from the slide element. For example:
Change this:

<div class="position-relative overlay overlay-color-primary overlay-show overlay-op-8" data-dynamic-height="['670px','670px','670px','550px','500px']" style="background-image: url(img/slides/slide-bg-6.jpg); background-size: cover; background-position: center; height: 670px;">.......</div>

To this:

<div class="position-relative" data-dynamic-height="['670px','670px','670px','550px','500px']" style="background-image: url(img/slides/slide-bg-6.jpg); background-size: cover; background-position: center; height: 670px;">.......</div>

2) Set the option stickyChangeLogo to false. Example:

<header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 45, 'stickySetTop': '-45px', 'stickyChangeLogo': false}">.............

We hope this helps!

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

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[asiimwefx]

I figured out a solution to question 1 by changing the bg color attribute to transparent in default.css.

But for preventing the template from resizing my logo, the solution you provide doesn’t work. My option looks like this:

`<header id=”header” class=”header-effect-shrink” data-plugin-options=”{‘stickyEnabled’: true, ‘stickyEffect’: ‘shrink’, ‘stickyEnableOnBoxed’: true, ‘stickyEnableOnMobile’: true, ‘stickyChangeLogo’: false, ‘stickyStartAt’: 120, ‘stickyHeaderContainerHeight’: 70}”>

---

[Support]

Hello,

The ‘stickyChangeLogo’: false should works. On this case please send us a online test link with your website, so we can inspect the code and discover where’s the issue.

I saw you already shared a website test link on start of this ticket, but it’s returning error 404 (not found).

Kind Regards,

Rodrigo.

---

[asiimwefx]

The website is aircooluganda.com, and the logo in its original size and shape can be viewed at aircooluganda.com/img/logo.png.

We’ll appreciate it if you help us have the logo appear on the website in its original shape and dimensions.

---

[Support]

Hello,

Thanks for the link.

The issue is that your images has a square aspect ratio and you are defining the img tag with wide aspect ratio (width and height).

Please try changing the img tag to:

<img alt="Porto" width="45" height="45" src="img/logo.png">

* Note the width and height values.
* If you want a bigger logo, you can increase these values. But always maintain the same value for both attributes, since your image is in a square aspect ratio.

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

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[asiimwefx]

This resolved it. Thank you!

---

[Support]

Hello,

Great! 🙂

If you need further assistance feel free to contact us.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts