[Resolved] Logo In Navbar

[Remi L]

I am struggling to make it work. I upload a custom css plugin and the snippet plugin, I added the both the code you provide but nothing change… Do you know if “Simple Custom CSS” is a good plugin to do so?

[Tom]

Simple Custom CSS is a good plugin 🙂

However, make sure you’re adding the CSS using one of these methods: http://generatepress.com/knowledgebase/adding-css/

And the PHP using one of these methods: http://generatepress.com/knowledgebase/adding-php-functions/

[Joseph]

I added the snippet and the css to the child theme and works just as you stated, perfect! The only question I have is when I view it on a mobile phone the logo stays to the left, how cam I center it on mobile view.

(http://provinciawebdesign.com/disruptup/)

Thanks Tom, really impressed with your work AND support.

[Tom]

Try this CSS:

@media (max-width: 768px) {
      .site-logo {
            float: none;
            margin-right: 0;
      }
}

[Joseph]

Worked great after adding .main-navigation to the css you mentioned above.

@media (max-width: 768px) {
.main-navigation .site-logo {
float: none;
margin-right: 0;
}
}

Thank you again!!

[Tom]

Perfect – no problem! 🙂

[Austin Sanford]

I have had only some luck with this… Seems like the image is deciding the size of the nav bar. So i have to be really careful about the size image i upload. How could i upload a higher quality image so that maybe it scales to the px of the nav bar that I want and the logo doesn’t look so bad : (

http://www.markozias.org

[Tom]

Hi Austin,

This CSS from the first page is the trick:

.main-navigation .site-logo {
    float: left;
    line-height: 60px; /* Adjust this to your menu item height */
    margin-right: 1.5em;
}

The line-height attribute should match the height of your navbar – that should make sure the logo image isn’t too big.

If that doesn’t work, try this:

.main-navigation .site-logo img {
      height: 60px;
}

Let me know 🙂

[Author]

Posts