Archived topic
Logo In Navbar
22 replies · Started by Matt Canning on January 30, 2015
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?
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/
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 : (
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 :)