Slider Image & Header Image Customization

Hi Kharis,

I probably need to start a new thread.

The theme is pretty good but I found it difficult to make adjustments. For e.g.

  1. The Slider Images are great but because these images can be light colored or dark, it is difficult to get a text font that works with both light and dark as can be seen on my current 2 Slider Images at
    https://www.taxattorneynearme.us/

This affects both the Slider Text and the Menu.

It is the same problem on Page Headers as well, see
https://www.taxattorneynearme.us/?s=phoenix

Is there a way to

a) really enlarge the fonts as a way to trial and error till a suitable color can be found for both light and dark images? The Google fonts do not seem easy to tailor.
b) move the Menu to below the Slider Image and on Pages, below the Page Header Image? This will at least solve one problem.

  1. I experimented with having Slider Images for Pages as well but

a) there is no way to change the Images as Pages simply pull from the Frontpage Slider Images
b) the Search box disappears even though I want it

Are there solutions to the above that are available only in the Pro version?

Cheers,
Christie

Hello there,

In order to provide you an easy to track assistance, let’s start with the header menu bar readability and the text slider. For the second one, please post it in a new topic with proper title.

Moving header menu bar to below the slider is difficult task and it goes beyond our support policy as your attempted to change its layout significantly. For alternative solution, I’d suggest you to add a semi-transparent dark background color. Add the following CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.site-header {
  background-color: rgba(0,0,0,0.2);
}

For the text slider, would it be acceptable if you colorize its color individually and darken the text shadow? Try adding the following custom CSS code:


/* Slide 1 */
.header-slider .slide-item:nth-of-type(1) .text-slider .maintitle,
.header-slider .slide-item:nth-of-type(1) .text-slider .subtitle {
  color: #fff;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
}

/* Slide 2 */
.header-slider .slide-item:nth-of-type(2) .text-slider .maintitle,
.header-slider .slide-item:nth-of-type(2) .text-slider .subtitle {
  color: #ff0000;
  text-shadow: 0px 0px 11px rgba(0, 0, 0, 0.4);
}

Regards,
Kharis

Hi Kharis,

Your codes as usual works great.

I will be experimenting with more colors etc.

See : https://www.taxattorneynearme.us/

I will post the 2nd query separately now.

Cheers,
Christie

As advised, I have reposted the 2nd query:

Thank you!

I replied it. I hope you can find it helpful.

Regards,
Kharis

Hi Kharis,

Can I know what is the image size for page headers?

Is there a way to change the size?

Cheers,
Christie

Hi Christie,

I’d recommend you use larger image; 1920px x 1275px is fine for parallax effect on larger screen. The first slide image of our demo site uses this size.

> Is there a way to change the size?

What’s your objective of doing so?

Regards,
Kharis

Hi Kharis,

Please see:
https://www.taxattorneynearme.us/alaska-header-test-1/

As it is, header image is a smaller size than the Slider image. But not knowing the space allotted for header size, I have not been able to fit the full flag image into the header. Right now, both the top and bottom of the flag is truncated.

If it is possible to change the image space, then I may be able to experiment to get the ptimal page header image.

I’m also confused why under Header media the default says 300px. Which area is this actually? The area for the logo and Nav Menu?

For Slider I am just sticking to the default. What is the deafult image size for slider?

Cheers,
Christie

Hi Kharis,

I have discovered by trial and error the width of the header image to be 350px :

https://www.taxattorneynearme.us/alaska-header-test/

I would be grateful for your reply nevertheless.

Thanks much,
Christie