[Resolved] Logo adjustment

Home Forums Support Logo adjustment

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1399742
    Subarnamoy

    IN DESKTOP –

    I am using “navigation as header” & ‘sticky navigation” so the logo size was getting too big.
    I used the CSS mentioned below to adjust the size.

    .site-logo {
    width: 50%;
    height: auto;
    }

    But I am unable to adjust logo position. Position of the logo is a bit downward. I like to move it upward to set in the middle of the navigation bar height.

    IN MOBILE –

    I have also customized the branding to set it in the middle of navigation but when i changed to branding from heading to logo. Logo is not positioned in the middle. I like to set in in the middle.

    #1399807
    Leo
    Staff
    Customer Support

    Hi there,

    Remove your own CSS:

    .site-logo {
        width: 50%;
        height: auto;
    }

    And try this instead:

    .navigation-branding img {
        height: 50px;
    }

    The alignment issue is likely because of the image cropping – there is more padding on the top than the bottom as seen here:
    https://www.screencast.com/t/OSEYbAoBEJ

    #1404522
    Subarnamoy

    thank you very much for your assistance. It is working.

    #1404563
    Leo
    Staff
    Customer Support
    #1405991
    Subarnamoy

    now, I just noticed that the logo is getting bigger when I am scrolling down. I am using sticky navigation. I want it to stay the same when I scroll down. is it possible?

    #1406628
    Leo
    Staff
    Customer Support

    Can you disable the coming soon page so I can take a look?

    Thanks 🙂

    #1406795
    Subarnamoy

    I have disabled coming soon page. You will be able to visit the page now.

    Just letting you know, my Cloudflare is creating issues. it is showing last published page even after caching. So if you see this page or a blank page with footer widgets, let me know. I’ll temporarily disable Cloudflare.

    oh! I forgot to mention, I have a ghost button on my navigation panel. The border of the button is also getting bigger. Is it possible to fix? I mean I like to stay the same when scrolling down

    #1406939
    Leo
    Staff
    Customer Support

    Let’s tackle one issue at the time.

    Try editing your CSS to this:

    .navigation-branding img {
        height: 45px !important;
    }
    #1407093
    Subarnamoy

    Okay, this is working. the logo isn’t getting bigger anymore. But it is showing a little bit on the right side. I have custom CSS to show it in the middle of the mobile navigation. And like adjust the size in mobile version too. it seems that i am unable to adjust the logo with my CSS because wehn i add the css it branding type was set to site tittle. I used the CSS which I mentioned below with a hook element for custom hamburger menu

    li.slideout-toggle {
    display: none !important;
    }

    span.slideout-toggle {
    order: -1;
    margin-left: 18px;
    }
    span.slideout-toggle a:after {
    content: ‘Menu’;
    margin-left: 4px;
    }
    span.slideout-toggle a {
    color: #727272;
    }
    span.slideout-toggle a:hover {
    color: #313131;
    }
    #mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
    }
    #mobile-header .navigation-branding {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    }

    @media
    (min-width: 769px) {
    span.slideout-toggle {
    padding-right: 18px;
    }
    }

    #1407971
    Leo
    Staff
    Customer Support

    Try this CSS for mobile:

    .site-logo.mobile-header-logo {
        margin-left: 0;
    }

    I would also recommend removing the mobile menu label so it would be true center:
    https://docs.generatepress.com/article/mobile-menu-label/

    #1408610
    Subarnamoy

    Still, the mobile logo didn’t shift in the middle so changed the value a bit.

    .site-logo.mobile-header-logo {
    margin-left: -10%;
    }

    plus I don’t know how to decrease it’s size. is it possible ot change it with CSS?

    #1408726
    Leo
    Staff
    Customer Support

    Hmm if you use the method here exactly:
    https://generatepress.com/forums/topic/logo-adjustment/#post-1407971

    The logo should be centered.

    If you are happy with the current set up, then this CSS should change the logo size:

    .site-logo.mobile-header-logo img {
        padding: 15px 0;
    }
    #1408797
    Subarnamoy

    yes, I tried that setting but the logo is not centred so I adjusted it to -40 after changing logo size.

    thank you this is working perfectly now.

    #1409459
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.