The mail link and the social icon links do not work in my top bar

[RHR]

Hi, I have added a top bar and it has text with a mailto link and social icons. None of these link out. Is there something I’ve set incorrectly? Thanks.

[David Martin – Support]

Hi,

Looks to be a z-index issue.

Please add this and test the page:

ul.social-icons li:not(.sf-love) a {
    z-index: 9999;
}

Thanks,
David.

[RHR]

Hi David

That’s worked great for the social icons, but my email link isn’t working. Any ideas on that?

While you’re looking, can you see why I have white border to the right of my slider half way down the Home page – it only shows on Safari, it’s not there in Firefox or Chrome.

Thanks.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Same issue again it is the z-index. The line is a background, caused by a negative slider margin.

#top-bar .tb-text > a, 
#top-bar nav .menu > li > a {
    z-index: 9999;
    position: relative;
}

.home .swift-slider {
background: transparent;
}

Thanks,
David.

[RHR]

Hi, thank you so much. We’re nearly there.

This seems to have resolved everything in Safari and Chrome, but in Firefox, the background of the top bar now disappears when you scroll. Can you find a way round this, please?

Thank you.

[David Martin – Support]

That is the z-index.

Ex:

#top-bar {
    z-index: 9999;
    position: relative;
}

Thanks,
David

[RHR]

Thank you, that is great.

Can I ask you one more question, please?

Is it possible to reduce the size of the images on the blog page and on the post detail pages?

Thank you.

[David Martin – Support]

Sure, you can use CSS to reduce the % width. Ex:

.blog-item figure img {
    max-width: 60%;
    margin: 0 auto;
}

Thanks,
David

[RHR]

Thank you. And what about the image in the detail page? Is is possible to reduce this too?

Thank you.

[David Martin – Support]

Hi, you would use the same CSS but with a different selector. If you know HTML/CSS you can use the chrome web inspector to look these up on the page.

Ex:

article.post figure.media-wrap, 
article.post .content-wrap, article.attachment .content-wrap {
    max-width: 60%;
    margin: 0 auto 60px auto;
}

Thanks,
David.

[RHR]

Hi, I really appreciate your help. Although I can usually work most CSS out from inspecting the source code, I thought maybe there was a setting within the theme for that. That worked great.

Finally, now I have a reduced image for each post on the blog page, when you hover over them the hover box is the original size and looks wrong. I’ve tried adding in the CSS for this, but I’m afraid I can’t work it out. Back over to you, please.

[Kyle – SUPPORT]

Use this:

.blog-item figure {
  max-width: 60%;
}

Basically remove the img from the previous css

– Kyle

[David Martin – Support]

No problem, that is a little more complex. Please try this:

figure.animated-overlay:hover figcaption {
    width: 60%;
    left: 20%;
}

Thanks.

[RHR]

Thank you so much for all your help.
Sue

[David Martin – Support]

Hi Sue,

No problem, happy to help you!

– David.