Site logo

Archived topic

Logo In Navbar

22 replies · Started by Matt Canning on January 30, 2015

Viewing posts 16–23 of 23

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?

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.

Try this CSS:

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

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!!

Perfect - no problem! :)

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

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 :)

This archived topic is closed to new replies.