Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

1. I have a transparent header so the mobile menu is also transparent when expanded. The problem is now the menus are not visible on top of the slider.

How do I make this dropdown menu turn an opaque (70%) black for mobile please?

2. So, with having a transparent header I have set:

.masthead {
position: absolute;
width: 100%;

So when I go on my portfolio page the media slider is sitting behind my header menu. I have input:

.single-x-portfolio .masthead {
position: relative;
width: 100%;

which solves this but I would like the same permanent banner for every portfolio item page, say 300px height (http://aura-facilities.lmdev.co.uk/wp-content/uploads/2016/11/banner_dummy.jpg).

Can you please help me with these? (details to follow)

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in!

1. Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px) {
.x-nav-wrap.mobile {
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 0 20px !important;
}
}

2. To have a permanent banner for every portfolio item page, you can use this code:

.single-x-portfolio header.masthead {
    background-color: transparent;
    background-image: url(http://aura-facilities.lmdev.co.uk/wp-content/uploads/2016/11/banner_dummy.jpg);
    padding-bottom: 300px;
    background-size: cover;
    background-position: center center;
}
.single-x-portfolio .x-navbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Fantastic thank you.

I have another small problem:

The intro text on the homepage “Aura Facilities provides..” is styled:

margin-top: 0px; margin-bottom: 20px; font-family: oswald; font-weight: 300; font-size: 29px; line-height: 1.3em

I have applied the exact style to the intro text on PROJECTS page and the fold is displaying bold?

thanks in advance

[Nabeel A]

Hi again,

It seems like the font you’re using is a bold font itself. Try using a different font for example font-family: sans-serif; and see if this resolves the issue?

Let us know how this goes!

[3b1a2f46-a516-40cf-beba-b611930e4819]

No sorry that doesn’t work.

Like I said I used exactly the same style on the homepage intro and that is perfect!

[Christian]

This is because fonts loaded from Slider Revolution do not load site wide. Your X Typography setting is set to Oswald 700 so even setting it to 300 won’t take effect (see attachment).

To make your CSS work, you need to load Google Fonts Oswald 300 outside of X settings. See http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

Thanks.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Sorry, I didn’t mean the home slider rev text

The text below this (Aura Facilities provides construction and repair and maintenance…) has the same styles:

margin-top: 0px; margin-bottom: 20px; font-family: oswald; font-weight: 300; font-size: 29px; line-height: 1.3em

This is displaying how I want it to.

When I do the same to the text on projects and contact page, it remains bold?

[Rupok]

Hi there,

It seems Oswald font is not loading on the page and that’s why the font-weight variants are not changing. Did you set the font from Customize > Typography or using on custom CSS? Also kindly set the font-family as "Oswald",sans-serif instead of just oswald

Let us know.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

I have set the heading font as Oswald 700 in the customizer.

The only thing I have added in the custom CSS is:

h4,
.h4 {
font-size: 22px;
color: #f19440;
font-weight: 300;
letter-spacing: 1px;
}

h5,
.h5 {
font-family: “lato”;
font-size: 22px;
color: #f19440;
letter-spacing: 1px;
}

The same thing happens if I apply the same styles to a text block – it can only pull through a bold version.

The custom H4 styling all works apart from the font weight too?

Would really appreciate your help here

thnaks

[Paul R]

Hi,

Please note that Oswald has only three font weights available.

To make it available to all pages, you can add this under Custom > Edit Global CSS in the Customizer.

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');

Hope that helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Yes I know – I have been trying to use 300,

Still nothing I’m afraid!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Could you please try it yourself?

[Jade]

Hi there,

Please try to add this in the functions.php of the child theme instead to register the font:

add_action( 'wp_enqueue_scripts', 'load_font' ); 
 
function load_font() {	

	wp_enqueue_style( 'site-google-font', 'https://fonts.googleapis.com/css?family=Oswald:300,400,700' );
}

Hope this helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Thank you Jade that has worked

Bizarre thing to be happening though!

[Author]

Posts