- This topic has 18 replies, 5 voices, and was last updated 3 years, 6 months ago by
David.
-
AuthorPosts
-
July 1, 2017 at 9:57 pm #342671
Carlo
i have added my logo in svg format with the plugin that has been recommended “safe SVG”.
the logo has come up just the right size in the navigation bar, i saw there was a CSS to adjust the logo if it was used in the site identity
.site-logo img {
width: 100px;
height: 100px;
}do i need to do anything like this if in the navigation bar? if so could you recommend what CSS to use to make any logo adjustments in the navigation?
thanksGP Premium 1.3.1July 1, 2017 at 10:17 pm #342679Leo
StaffCustomer SupportHi there,
This should work:
.navigation-logo img { width: 100px; height: 100px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 1, 2017 at 11:29 pm #342715Carlo
thanks Leo
July 1, 2017 at 11:35 pm #342717Leo
StaffCustomer SupportNo problem!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 6, 2017 at 8:12 pm #345379Bin
Hello, Leo. I have an issue with the svg logo alignment on mobile view. The logo doesn’t alignt top left!!! I am using the css from above. You can see it here: http://www.anonymio.de
Can you help, please? Thanks, BinJuly 6, 2017 at 11:24 pm #345432Leo
StaffCustomer SupportHmm if you are using mobile header then try this CSS instead:
.site-logo.mobile-header-logo { width: 100px; height: 100px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 7, 2017 at 5:20 am #345530Bin
Using all of them now. This seems o work:
.site-logo img { width: 275px; height: 60px; } .navigation-logo img { width: 230px; height: 50px; } .site-logo.mobile-header-logo { width: 185px; height: 40px; }
Thanks a lot, Leo
July 7, 2017 at 8:54 am #345625Leo
StaffCustomer SupportNo problem!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 7, 2017 at 9:27 am #345638Bin
BUT: The browser scales much smaller than css! I use one svg 275×60 for all (desktop, mobile, navi).
CSS navi: 230×50 > Browser shows 210×40
CSS mobile: 185×40 > Browser shows 165×40Where is my mistake?
July 7, 2017 at 9:54 am #345663Tom
Lead DeveloperLead DeveloperThe logo will scale to fit inside the container (or else it would overhang the container etc..).
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 17, 2017 at 12:54 pm #387018David
Hi Tom,
As a follow up on this, I added an SVG file with the plugin and tried all 3 of the CSS codes.
While the width on all 3 CSS snippets work, the height does not change at all, whether it’s 1px or 500px. I tried height auto as well. It causes the logo to distort because of this.
Thoughts?
September 17, 2017 at 12:56 pm #387019Leo
StaffCustomer SupportCan you link me to the site?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 17, 2017 at 12:59 pm #387020David
basicpup.com
I’m trying to get the mobile version of the logo (Mobile header enabled) to not be cut off in the bottom because the height is too big.
September 17, 2017 at 1:06 pm #387023Leo
StaffCustomer SupportTry updating the selector to this:
.main-navigation .inside-navigation .navigation-logo img
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 17, 2017 at 1:09 pm #387024David
Hi Leo,
Hm that doesn’t change the mobile header logo, only desktop. And the height is still unresponsive only width.
This selector is correct but only changes width and not height.
.site-logo.mobile-header-logo {
} -
AuthorPosts
- You must be logged in to reply to this topic.