New Demo Header Contact

Hello.

I’m trying to import the new Sydney Pro demo, but it’s not working (http://alagarta.com.br/). Actually, the only thing I need is to know how to make the header contact become transparent and in the background show the image from the Smart Slider and insert the social media icons in the top right.

If there is any way of doing it in CSS Aditional, it would help.

Hugs!

Hello,

You can add and activate contact info in Customize > Sydney Pro: Extra options > Header contact info section. Also you can try to use the following CSS code in order to move it to the right side.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

.header-contact .header-contact-info {
    float: right;
}

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

Kind Regards, Roman.

Hi Roman.

It didn’t work and is not exactly what in trying to do. This URL is only for a test. I use the Sydney Pro in several other websites and Smart Slider also. I’d like to know how to do like the demo: http://demo.athemes.com/sydney-pro/, where the header contact has a transparent background and the slide background image is shown. Besides, in Dashboard → Appearance → Customize → Extra Options → Header contact info doesn’t have the social media icons option, the aditional code could only align the phone, email and address to right, like I did in http://clinicamovemente.com.br.

Sorry about so much text, I use the Sydney Pro in about 70 websites and I’m lovin’ it!

Thx!

Hello,

  1. You can try to select Sticky for Sticky menu in Customize > Header area > Menu style section and see if it helps.

  2. Please create a new topic for social media icons issue to keep forum in good order and make it easier to help you.

Kind Regards, Roman.

OK, let’s go.

It’s not a social media icons problem, it’s a header contact problem.

I want to know how to make the header contact background transparent and behind it the image of Smart Slider.

How do it simple?

Hello,

You can try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

@media (min-width: 1025px) {
    .header-clone {
        display: none;
    }

    .header-contact {
        position: absolute;
        background-color: rgba(255,255,255,0.9);
        width: 100%;
        z-index: 1000;
    }
}

Kind Regards, Roman.

Awesome!
Now it worked! I just had to make a feel adjustments:

@media (min-width: 1025px) {
.header-clone {
    display: none;
}

.header-contact {
    position: absolute;
    background-color: rgba(255,255,255,0.0);
    width: 100%;
    z-index: 1000;
	border-bottom: 1px solid white;
}

Thx a lot Roman!

Great! You are welcome! :slight_smile:

Kind Regards, Roman.