A myriad of small issues. Mobile navbar + favicon + topbar padding? + navbar logo alt text

Support
#1

HI. I own houseofleopold.com, with regular X theme. I am hoping to debut on Friday, and instead of spending 34958473 hours finagling and trying to pin down these final OCD issues, I am hoping you’ll be able to assist.

#1.
What is the correct way to display a horizontal version of my logo for mobile screen sizes? Everything I found didn’t work. http://houseofleopold.com/wp-content/uploads/2017/07/horizontal_logo.png is my desired logo, but i’d like for it to max out at 100px tall.

#2.
How do I correctly/successfully/accurately install a favicon? Is there some sort of trick to this? I couldn’t upload my .ico file to the Media Library because the file size wasn’t big enough. it’s like 0kb…? I think there is a favicon.ico copy in wp-content that I somehow FTPed in there without for sure knowing where it was going. I tried real hard though.

#3.
So my lovely CSS-diagonal topbar looks great on Desktop view, but when viewed on an actual mobile device, it has a gross big extra white space under the text. How can I fix this?

#4.
How to change the alt text when I hover over my logo in the navbar, both desktop and mobile versions?

THANK YOU so much for knowing all that you do. I appreciate your help. Please throw a gal a bone!

#2

:frowning:

#3

Hi There,

1.) We can use this custom CSS to adjust height:

@media (max-width: 979px){
 a.x-brand.img img {
  max-height: 100px;
}
}

Then to change the logo URL on smaller screen, add this custom JS:

(function($) {
      if ($(window).width() < 980) {
        $(".x-brand img").attr("src", "http://houseofleopold.com/wp-content/uploads/2017/07/horizontal_logo.png")
      }
    })(jQuery);

2.) Where exactly on wp-content folder did you add it? I can see you have a child theme. Let just say that you upload it inside x-child folder. The URL will be: http://houseofleopold.com/wp-content/themes/x-child/my-icon.ico

3.) Try this custom CSS:

 @media (max-width: 767px){
  .x-topbar .p-info {
           padding-bottom: 0px !important;
   }
   }

4.) It is the Tagline on Admin > Settings > General Settings. Feel free to change it.

Additionally, please note that we do answer from oldest to newest on this forum. Complicated questions take more time. Bumping your own thread means it will be push back from the queue.

#4

Thank you so much for your response!
1, 3, and 4 were A+.

Still having the favicon issue. The URL is http://houseofleopold.com/wp-content/themes/x-child/favicon.ico
I’m sure I’m doing it right, but not sure why it’s not working. Help?

#5

Sooooo I upgarded to Pro. Also just wanted to note, that I am actually having an issue with going mobile. It is showing it correctly in the preview screen, but on an actual phone, is showing it stacked, not inline. Any advice here?

#6

I’ve concluded the issue is that its now showing as a “Hero” header since that’s what my left column is. “How do I make it left-aligned when Mobile?” is a more accurate question.

#7

#8

Hi There,

Have you managed to fix the issue? It looks correct on my Android Phone.

Please let us know, thanks!