Add menu background for a slider image

Iam using sydney free version.
My websote is www.fiadotech.com
I have three questions.

  1. I want to add a background color to menu in the home page( I want to use slider).
  2. I want to add a click to the slider instead of sliding with a delay.
    How do I achieve both of these.
    3.I wanted to use sydney child theme. but Since my content is already in the sydney theme, how do I push my content to child theme.

Regards,
Indu

Hello Indu,

  1. Please use this CSS code to add background color to menu:
.site-header {
    background-color: rgba(33, 90, 173, 0.9) !important;
}
  1. Default Sydney slider doesn’t have such functionality, you can experiment with other sliders if you want to get this feature.

  2. When you switch to child theme all your content will be okay, you will only have to configure your theme once again in Appearance -> Customize.

You can add CSS code to style.css file of your child theme, also you can use Simple Custom CSS or similar plugin for adding CSS code.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thanks for the quick response.
I used below code in custom css
site-header {
background-color: rgba(33,90,173,0.9);
}
and this works for what I was looking for.
Can you suggest what other plugin I can use with sydney for my 2nd question.
Regards,
Indu

You are welcome Indu,

I am glad that code works for what you was looking for.

There are many good plugins out there and I think that you have to find one that is best for you (ideally, after trying several plugins). Here is a nice blog post with extensive comparison.

Kind Regards, Roman.

Hi Roman:
Thanks for the immediate response. I was very happy with the meta slider. I added that plugin also but was not sure how will I attach to my home page where the homepage will show the images that I have currently as a horizontal slider.
Regards,
Indu

Okay Indu,

  1. Go to your Dashboard -> Appearance -> Customize -> Header area -> Header type -> select No header (only menu) for Front page header type.

  2. Go to your Dashboard -> Appearance -> Editor -> select Theme Header (header.php) -> paste this code:

<?php 
    if (is_home() || is_front_page()) {
        echo do_shortcode("[metaslider id=123]"); // replace 123 with your slideshow ID
    }
?>

right after this:

<?php sydney_slider_template(); ?>

You can remove is_home() || part if you don’t want your slider to appear on blog page.

Also it is better to override header.php file using a child theme instead of injecting the code above after every theme update.

You can find more information in Meta Slider Documentation.

I hope that it will help you :slight_smile:

Kind Regards, Roman.

Roman:
Thanks for the response. I created a child theme and updated the functions.php to enqueue parent style. but when I activate the child theme, the content is from the sydney theme default and not the one I have. Also the child theme did not import the style.css from parent. As per the procedure mentioned in wordpress I created the folder sydney-child under theme directory and uploaded the functions.php. pls let me know what is missing in child theme.
Regards,
Indu

Hello Indu,

Your child theme needs style.css file as well.

The style.css file of your child theme needs comment header.

The function.php file of your child theme has to contain something like this:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

After switching to child theme from parent theme, you always have to reconfigure it in Appearance -> Customize, because themes don’t share its options.

I really hope that it will help you to use your child theme.

Kind Regards, Roman.

Ok I need to recustomize what about the pages will it be available for the theme or should I redo everything in child theme?

Hello Indu,

Your Pages, Posts, Uploads, etc. will be okay, you only have to customize the theme once again.

Kind Regards, Roman.

Roman:
Thanks a lot. I figured out and it works like cool.
Indu

I have one more problem. I have used services plugin to create services and have chosen the type a service for my product info. The service icon I have picked is fa-android, but hte color of the icon is blue because that is hte background color I have chosen for primary color and menu background. How do I change the color only for this service icon so that it shows green (for android apps).
Thanks.
Indu

Hello Indu,

Please try to use this CSS code to make it green:

#pg-5-0 .fa-android {
    color: green !important;
}

Kind Regards, Roman.

Roman:
I want to add SEO optimization for my page so which one do you suggest is best for this theme. Also how do I add meta description tag for my content which is in a widget.
Regards,
Indu

Hello Indu,

One of the best SEO plugins for WordPress that I know is Yoast SEO.

I don’t think that there is an easy way to add meta description to widget, but I think that it is better to add important content into separate page or post and optimize it with Yoast SEO.

Kind Regards, Roman.

Hi Roman:
I wanted to know how to add a text ( white colored) centered to the header image if I want to use a full width image as header background.
Regards,
Indu

Hi Indu,

You can add text directly into image with graphics editor that can add text (something like Paint), I think that it is one of the most simple solutions.

I hope that it will help you.

Kind Regards, Roman.

I know that , but thought I can keep the text in the content of the page so that I can change and the search engines can extract.
Regards,
Indu

Yes Indu,

That’s possible. But it requires editing of the .php template and CSS styling, so this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.