[Resolved] adjusting SVG logo in navigation bar

Home Forums Support adjusting SVG logo in navigation bar

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #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?
    thanks

    GP Premium 1.3.1
    #342679
    Leo
    Staff
    Customer Support

    Hi there,

    This should work:

    .navigation-logo img {
        width: 100px;
        height: 100px;
    }
    #342715
    Carlo

    thanks Leo

    #342717
    Leo
    Staff
    Customer Support
    #345379
    Bin

    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, Bin

    #345432
    Leo
    Staff
    Customer Support

    Hmm if you are using mobile header then try this CSS instead:

    .site-logo.mobile-header-logo {
        width: 100px;
        height: 100px;
    }
    #345530
    Bin

    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

    #345625
    Leo
    Staff
    Customer Support
    #345638
    Bin

    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×40

    Where is my mistake?

    #345663
    Tom
    Lead Developer
    Lead Developer

    The logo will scale to fit inside the container (or else it would overhang the container etc..).

    #387018
    David

    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?

    #387019
    Leo
    Staff
    Customer Support

    Can you link me to the site?

    #387020
    David

    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.

    #387023
    Leo
    Staff
    Customer Support

    Try updating the selector to this:
    .main-navigation .inside-navigation .navigation-logo img

    Let me know.

    #387024
    David

    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 {
    }

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.