This thread discusses one way to do it.
Okay, here’s what to do:
Menus – Screen Options enable CSS Classes
Select a Links menu item
URL is your site
Link Text blank
Add to Menu
After adding to menu, open “Menu Item” and set CSS Class to “topbar-logo”
Move it to the top of the menu
Add the following to your child theme css:
#nav-topbar .nav li.topbar-logo a,
#nav-topbar .nav li.topbar-logo a:hover {
display: block;
background-image: url('http://path to your logo');
background-repeat: no-repeat;
text-indent: -9000px;
padding-top: 10px; // using a 64x40 image
}
I have not understood very well what I have done, is to go to theme options, menus, links, I’ve put the URL of my site and have added the menu.
I think I’m doing wrong.
Did you add the css class to the menu item? Can you post a link to your site? Thanks.
I managed to move a little, but the logo appears very large. My site.
Normally your would use a resized image for the logo, scaled proportionately at 50px height. If you don’t want to do that then you could change the existing css:
Add this to the existing css above:
background-size: contain;
Then add this additional css:
.topbar-logo {
width: 250px;
}
There, perfect!
And also appear on mobile?
Yes, down to 720px when the menu collapses. Which means it would be visible on a tablet but not a phone.
I am also trying to put my logo in the top bar but I am using a different approach addressing the #item-menu-5146
What I achieved now you can see here:
I don’t know if this could be also a “clean” solution…?
What I don’t like is the hover effect. How could I get rid of it?
Thank you
Karsten
Hi Karsten. Not sure what you mean. The hover changes the background to light grey and displays the underline. Is that what you want to change?
Hi bd,
yes, I don’t want to have the hover und underline if someone clicks on my logo. I just want to see the cursor finger.
let me more explain:
if a visitor is on my new home page
http://www.kagels-trading.de/startseite/
which is currently a static page
everything looks good.
but if someone visits my blog page
http://www.kagels-trading.de/
then the logo is not visible. If you move your cursor over the not visible logo then the logo will appear.
I think the reason for this has to do with my code for current menu item settings.
Because the logo has the url
http://www.kagels-trading.de
it behaves like it is the current menu item.
Hmm, difficult to explain.
I would like to know how I can address the logo not to show any hover effects.
Thank you very much for help and advise.
Hi!
I think I understand you, but do not do it, what you mean is that if you move the cursor over the logo, no effect is shown?
How could I do to make it display correctly on mobile?
And I not like how it is on the mobile, how could I remove it?
I have done some work in the meantime and now the situation is like this:
If I click on my blog page then the logo works fine:
http://www.kagels-trading.de/blog/
No grey hover effect and only the finger cursor.
But if i click on the home page
http://www.kagels-trading.de/
then the logo is not visible because of the grey “current menu item” effect.
So, how could I get rid off the “current menu item effect” only in the logo menu item?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@karsten007, Please create a new thread to discuss that.
@thecrack – you asked two questions here:
How could I do to make it display correctly on mobile?
And I not like how it is on the mobile, how could I remove it?
Not sure which one it is you want to do?
