[Support request] Resize navigation logo

Home Forums Support [Support request] Resize navigation logo

Home Forums Support Resize navigation logo

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #636568
    April

    I’m looking for a way to have the logo in line with the menu, the logo to be the same height as the menu container, and the menu items to be aligned to the top or bottom of the container. I’ve tried a few ways and not getting it to work.

    What I’ve tried:
    Logo graphic under site identity. I’ve tried multiple files and file types and the graphic always shows as a question mark. Even if it did work, I’m not sure how to resize the graphic.

    Logo graphic in the navigation Logo (customizing – primary navigation – navigation logo). The graphic looks too small unless I have the menu height at 130 or more and it’s still not filling the container. I’m guessing this isn’t the best way to do what I’m trying to but it’s the only way I can actually see the graphic.

    Logo graphic in the header (customizing-layout-header) with header location set to “inside content area”. The logo isn’t showing up at all.

    GP Premium 1.6.2
    #636626
    Tom
    Lead Developer
    Lead Developer

    I think the Navigation Logo route is your best bet. If you want to add it and let me know, I should be able to increase the size with some CSS for you 🙂

    #636692
    April

    CSS would be great – thank you! I’ve got the Navigation Logo back in.

    #636854
    David
    Staff
    Customer Support

    Hi there, you can remove the padding from the Logo image which will make it fill the navigation bar with this CSS:

    .main-navigation .navigation-logo img {
        padding: 0px;
    }
    #637395
    April

    Much better. Thanks! Could you help me with CSS to move the menu? Let’s say to the bottom of the container.

    #637631
    David
    Staff
    Customer Support

    Could you make the navigation height smaller to say 60px (or something that suits you), ill then give the code to make the logo larger.

    #638225
    April

    Ok done!

    Also, do you know why the logo wouldn’t be showing for mobile?

    #638234
    David
    Staff
    Customer Support

    So this CSS:

    @media (min-width: 768px) {
        .main-navigation .inside-navigation {
            position: relative;
        }
        .main-navigation .inside-navigation .main-nav {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 150px;
        }
    }

    No logo on mobile, in the Customiser > Layout > Header – you have the mobile header selected which has its own logo space. Just add your logo there.

    #638900
    April

    I’m not seeing any change using that CSS (I’ve tried changing min-width amount and left px amount as a test and those aren’t changing anything)

    #639029
    Tom
    Lead Developer
    Lead Developer

    For some reason your logo is showing as a broken image for me. Is it supposed to be a .tiff file?

    #639100
    April

    It’s tiff. It’s odd – it doesn’t show a preview in my library but it works when I view the page. I checked on a couple devices and it was visible.

    I switched it to a png so see if that changes anything…

    #639122
    Tom
    Lead Developer
    Lead Developer

    What if you just add this CSS?:

    .main-navigation .navigation-logo img {
        height: auto;
        max-width: 200px;
    }
    #639141
    April

    Aha! I can tweak it from that. Thank you.

    Last thing – The logo is pretty small on mobile. Is there CSS to resize that?

    #639325
    David
    Staff
    Customer Support

    Hi there,

    you can use the same properties but applied to the mobile header:

    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 80px;
    }
    #641298
    April

    I’m not seeing a change using that code (checked on 2 devices)

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