[Nettbrygga]

Or. This might be a pathfix:

url('/fwa-logo-760.jpg') no-repeat !important

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

Ah. I see it now. On the big screen you have:

background: url(http://fp.digitalinternet.co.uk/wp-content/uploads/2016/12/cropped-fwa-logo-1070x178.png) no-repeat !important;

With the !important after it will override the background property for the smaller screen. Either remove it or add !important to the small screen as well.

I did the following:

@media only screen and (max-width: 767px)
.header-image .site-title a {
    background: url(fwa-logo-760.jpg) no-repeat !important;
}

Can't find your background image though, so check your path. I double checked with another path and this works fine.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

It's marked as private so I can't see it.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

Hm ok. Do you have a live link to your site?

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

Hello,

The CSS inside the media brackets seems fine (if you have the right path to the image).
Is the problem that the smaller image never even shows on smaller screens?

If you would like to target a typical phone screen for instance, I would try swapping out the media query with:

@media only screen and (max-width: 800px) {

Since it refers to the width of the viewport. I think this should work, if I understood your problem correctly.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

No problem 🙂

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

Hello,

Try opacity. Type opacity: 0.7; for instance.
Scale goes from 0 -1, with 1 being solid with no seethrough.

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Nettbrygga]

Hello,

This should work.

Add this to home.js:

$( document ).on('scroll', function(){

if ( $( document ).scrollTop() > 650 ){
$( '.site-header' ).addClass( 'dark' );
}
else {
$( '.site-header' ).removeClass( 'dark' );
}
});

CSS:
.dark {
background-color: #000 !important;
}

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[Author]

Posts