Adjusting mobile version home page layout

Site URL: http://www.jessicawisemanphotography.com

Hi, I am having a lot of trouble with the mobile version of my homepage. I had previous help on here with some code to get my logo large enough for the web version as well as to have to colour white on the home page and black on all other pages which all worked perfectly for the web version. However, the code has been applied to the mobile version too and the logo is simply too big for the mobile version. 

This is the code I have used so far......

.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}

As you can see from the attached photos below the logo overlaps my page links and doesn't fit in the space. It would be nice to have it a bit smaller to fit and not overlapping. Im not sure if this is possible but I would also love the drop down menu to be higher, more towards the top corner of the page rather than on the side half way down. But honestly that isn't the ain priority right now. 

Any help would be appreciated! Thank you!! 

@tuanphan

Edit above code to

@media screen and (min-width:992px) {
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}
}

@tuanphan Thank you so much for your help!! I have managed to get it the right size but now can't figure out code to invert the logo colour on the mobile version. I took a few guesses but honestly with no code knowledge I have no idea what I am really doing. Could you please advise how to invert the mobile logo just for the homepage too? Thank you in advance. 

4 hours ago, Jessssica said:

@tuanphan Thank you so much for your help!! I have managed to get it the right size but now can't figure out code to invert the logo colour on the mobile version. I took a few guesses but honestly with no code knowledge I have no idea what I am really doing. Could you please advise how to invert the mobile logo just for the homepage too? Thank you in advance. 

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}

2 hours ago, tuanphan said:

@media screen and (max-width:767px) { .homepage .header-title-logo img {filter: invert(1);} }

Thanks Tuan, I don't know what I am doing wrong. I copied and pasted this in, and it appeared to work for a split second but now it doesn't. This is the whole code I have applied so far.... 

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}
} 

Any clue where I went wrong? It still appears black on the mobile version. 

26 minutes ago, Jessssica said:

Thanks Tuan, I don't know what I am doing wrong. I copied and pasted this in, and it appeared to work for a split second but now it doesn't. This is the whole code I have applied so far.... 

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}
} 

Any clue where I went wrong? It still appears black on the mobile version. 

Quote

@media screen and (max-width:767px) {
.homepage .header-title-logo img {filter: invert(1);}
}
.header-title-logo img { max-height: 3000px; max-width: 500px; }
.homepage .header-title-logo img {filter: invert(1);}
} 

remove big }

39 minutes ago, tuanphan said:

remove big }

I did that but it then resorts back to being too big?

adjust this .header-title-logo img { max-height: 3000px; max-width: 500px; }

Thank you so much for all your help Tuan! Honestly could have done it without you! 🙂 I managed to figure it out and get it all working for both versions how I wanted. 

@media screen and (min-width:992px) {

  .header-title-logo img { max-height: 3000px; max-width: 500px; } }

.homepage .header-title-logo img {filter: invert(1);}