• Plans & Pricing
  • Log in
  • Get started
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Newsletter
  • Professional Email
  • Website Design Services
  • Commerce
  • WordPress Studio
  • Enterprise WordPress 
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
  • Support Center
  • WordPress News
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
Get started
  • Sign up
  • Log in
About
  • Plans & Pricing
Products
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Newsletter
  • Professional Email
  • Website Design Services
  • Commerce
  • WordPress Studio
  • Enterprise WordPress  
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
Resources
  • Support Center
  • WordPress News
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
Jetpack App
  • Learn more
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
Search
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
Forums / Need help re-adding a logo to the top left bar of my site

Need help re-adding a logo to the top left bar of my site

  • Unknown's avatar
    mannyopr · Member · Feb 22, 2015 at 12:55 am
    • Copy link Copy link
    • Add topic to favorites Add topic to favorites

    Hey there, so I used a custom CSS code to insert a logo to the top left of my site. After some months, I tweaked the width and height of the logo from the CSS code but the logo disappears and hasn’t reappeared since. Here’s the code:

    .main-navigation li.mannyopr_logo > a {
    background: url(‘http://mannyopr.files.wordpress.com/2014/11/web_logo2.gif’) no-repeat scroll center center rgba(0,0,0,0);
    display: block;
    height: 40px;
    margin: 0 25px 0 0;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    width: 196px;
    }

    .main-navigation li {
    Vertical-align: middle;
    }

    My question is, How do I get the logo to reappear?

    The blog I need help with is mannyopr.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    dannywellman · Member · Feb 22, 2015 at 3:15 am
    • Copy link Copy link

    Hello there!

    It looks like the id tag of the nav bar has changed. Try this:

    #wp-admin-bar-blog > a {
    background: url(‘http://mannyopr.files.wordpress.com/2014/11/web_logo2.gif’) no-repeat scroll center center rgba(0,0,0,0);
    display: block;
    height: 40px;
    margin: 0 25px 0 0;
    overflow: hidden;
    text-indent: 150%;
    white-space: nowrap;
    width: 196px;
    }

    However, I’m not sure about the TOS for this hack. I didn’t see anything about removing their logo on the Admin bar, but who knows? Also, I don’t think this logo will show up for anyone unless they are signed in to WordPress. Either way, I think the CSS change should work for you!

    Let me know if that does it, please!

    Have a good evening!

  • Unknown's avatar
    mannyopr · Member · Feb 22, 2015 at 3:25 am
    • Copy link Copy link

    Thanks! I’ll give it a try and give you an update

  • Unknown's avatar
    mannyopr · Member · Feb 22, 2015 at 3:34 am
    • Copy link Copy link

    Hey there,

    It didn’t work for the nav bar that has the menu (about, portfolio, blog, contact) which is where it was before I had the problem. However, it shows up on the admin bar just fine but I want it to show on the menu bar (to the left of about, portfolio, blog, contact).

    I’m having trouble figuring out why the CSS code won’t work anymore when the same code worked when the logo was there.

  • Unknown's avatar
    dannywellman · Member · Feb 26, 2015 at 1:54 am
    • Copy link Copy link

    Hello again!
    I’m sorry about the delay. I was in Dallas for a couple days.

    I also apologize for misunderstanding where you needed the logo. Could you try this out on your site?:

    #menu-item-760 > a {
    background: url(‘http://mannyopr.files.wordpress.com/2014/11/web_logo2.gif’) no-repeat scroll center center rgba(0,0,0,0);
    display: block;
    height: 52px;
    margin: 0 25px 0 0;
    text-indent: 100px;
    white-space: nowrap;
    }

    The text-indent line determines how far away the About word is from the little logo. Fiddle with the number a bit to get the spacing the way you want.

    FYI:
    menu-item-760 is About
    menu-item-762 is Portfolio
    menu-item-759 is Blog
    menu-item-761 is Contact

    If you change a menu item in the future and want to tag the logo to it, you’ll need to know the exact id of that menu item. I found it by looking at the source code of your site.

    I hope that one works for you! Let me know if it does or not, please.

    Have a good evening!

  • Unknown's avatar
    mannyopr · Member · Feb 27, 2015 at 4:31 pm
    • Copy link Copy link

    Thanks Dan!

    I’ll give this one a try

  • The topic ‘Need help re-adding a logo to the top left bar of my site’ is closed to new replies.

Tags

  • CSS
  • Header
  • logo

About this topic

  • In: CSS Customization
  • 2 participants
  • 5 replies
  • Last activity 11 years
  • Latest reply from mannyopr

Couldn't find what you needed?

Contact us

Contact us

Get answers from our AI assistant, with access to 24/7 expert human support on paid plans.

Browse our guides

Browse our guides

Find step-by-step solutions to common questions in our comprehensive guides.

WordPress.com

Products
  • WordPress Hosting
  • WordPress for Agencies
  • Become an Affiliate
  • Domain Names
  • AI Website Builder
  • Website Builder
  • Create a Blog
  • Professional Email
  • Website Design Services
  • WordPress Studio
  • Enterprise WordPress
Features
  • Overview
  • WordPress Themes
  • WordPress Plugins
  • WordPress Patterns
  • Google Apps
Resources
  • WordPress.com Blog
  • Business Name Generator
  • Logo Maker
  • WordPress.com Reader
  • Accessibility
  • Remove Subscriptions
Help
  • Support Center
  • Guides
  • Courses
  • Forums
  • Contact
  • Developer Resources
Company
  • About
  • Press
  • Terms of Service
  • Privacy Policy
  • Do Not Sell or Share My Personal Information
  • Privacy Notice for California Users
DeutschEspañolFrançaisBahasa IndonesiaItalianoNederlandsPortuguês do BrasilSvenskaTürkçeРусскийالعربيةעִבְרִית日本語한국어简体中文繁體中文English

Mobile Apps

  • Download on the App Store
  • Get it on Google Play

Social Media

  • WordPress.com on Facebook
  • WordPress.com on X (Twitter)
  • WordPress.com on Instagram
  • WordPress.com on YouTube

Automattic

Automattic
Work With Us
    • WordPress.com Forums
    • Sign up
    • Log in
    • Copy shortlink
    • Report this content
    • Manage subscriptions