Main logo partially showing in mobile view as well as mobile logo

cece101

http://irelandspoetpatriots.com

on mobile view I have selected a mobile logo to use instead of the main logo. When you view the website on a phone you do see the mobile logo BUT for some reason you also see the first line "Ireland's" of the main logo as well. Not sure why the main logo shows at all. Please help.

Custom CSS being used is:

cece101

#Top_bar #logo img {

    height: auto !important;

    width: auto !important;

}

#Header_creative { box-shadow: 0 0 0 0; }

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

#Header_creative { background-image: url(http://irelandspoetpatriots.com/wp-content/uploads/2016/12/IPP_Banner_background12-15-16-1-e1481992953107.jpg); background-repeat: no-repeat; background-position: top center; width: 300px; }

#menu { background: none !important; }

#Top_bar .menu > li > a span:not(.description) { padding: 0px 0px 5px 40px; text-align: left; }

       #Top_bar .menu { font-size: 12px; line-height: 15px; }

}

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

#Header_creative #Top_bar #logo img{max-height:41px}

#Header_creative #Top_bar #logo { padding: 0 0 10px; }

}

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

#Top_bar #logo img { vertical-align: inherit; }

}

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

    #Top_bar, #Action_bar { background: none; }

}

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

    h1, h2, h3 { font-size: 20px !important; }

}

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

    h4, h5, h6 { font-size: 16px !important; }

}

.widget_recent_entries ul li .post-date { display: none !important; }

@media (max-width:1239px) {

.logo-main {

display:none !important;

}

.logo-mobile {

display:block !important;

}

.logo-sticky {

display:none !important;

}

}

Bryan

Hi,

we do not quite know what do you mean. Could you exlain this with a screenshot?

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cece101

You can see the image with issue here - https://prnt.sc/fr55zm

sorry the image is turned but you can still see the first line of the regular logo shows below the mobile logo and it shouldn't show at all. Thanks.

Bryan

This is cause by the custom css you have. Please revise the css, if you remove it the problem is gone.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cece101

Please explain in detail. Thanks.

Bryan

There are two logos showing up on sticky header, which one would you like to have present.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cece101

This logo is the one I want to use for tablets and phones - sticky

https://prnt.sc/frzbwh

Bryan

But if you remove the custom css you get what you want then please do it.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cece101

Not sure what specific css to remove. Please advise.

Bryan

Just remove all and start adding it partially, the you will see which is causing this problem. Sorry but the support does not include help with users custom css, this would take too much time, you have to understand this, thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

cece101

I figured it out. Thanks!