[Support request] Make site logo automatically decrease size when screen size decreases?

Home Forums Support [Support request] Make site logo automatically decrease size when screen size decreases?

Home Forums Support Make site logo automatically decrease size when screen size decreases?

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #2065785
    Ravi Dixit

    My logo is not decreasing its size rather nav menus go down to the logo(check here https://prnt.sc/25l5jtb). I want it should decrease its size instead of throwing the menus down from their place.

    Is there any solution?

    Also,
    Why this scroll is showing at the bottom of the screen to move the screen horizontally(check this https://prnt.sc/25l5ppj), all the containers are having the 1100 px width. Please help in fixing this too… Also, the same white space at the bottom (after footer).

    Please help me in fixing these issues.

    #2065854
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know ๐Ÿ™‚

    #2065875
    Ravi Dixit

    I have shared the link of the site through the private field.

    #2066693
    Ying
    Staff
    Customer Support

    1. The horizontal scroll is caused by using alignfull options, please deactivate that option.
    If you want to create full width sections, set the page to full width, the outter container of the gb container block will automatically reach full width.

    2. To make the logo shrink try this CSS:

    @media (min-width: 769px) {
    header#masthead .inside-header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    
    header#masthead .site-logo {
        max-width: 250px;
        flex: 0 4 250px;
        width: auto;
        align-items: center;
        display: flex;
        margin-right: auto;
    }
    
    .site-header .header-image {
        width: unset;
    }
    }

    3. Can you make sure you are using Flexbox instead of Float? You can check at customizer > general. And please deactivate cache plugin so we can see the code better.

    #2066726
    Ravi Dixit

    1. Can you explain it a bit? Where I can find this option? And all the containers are set to full width and inner containers have the same width size of 1100px.

    2. I have applied the code but it is not working as I expected. I have opened the site on a new tab and started decreasing its size slowly, See how the navigation bar changes for different sizes:
    1. https://prnt.sc/25qacq2
    2. https://prnt.sc/25qaee9
    3. https://prnt.sc/25qafs4
    4. https://prnt.sc/25qahdr

    Instead of making the logo shrink as size decreases, I would highly prefer if the entire nav menus can covert into this https://prnt.sc/25qakr1 when nav menus touched the logo.

    3. I have changed that to Float, but what will it do?

    #2066836
    Ying
    Staff
    Customer Support

    1. When you select the container block, the alignment option will show, do NOT choose Full width.
    https://www.screencast.com/t/Sa8lf0BHMG

    You’ll need to set the page to full width, you can set it in the page editor > layout meta box: https://docs.generatepress.com/article/layout-metabox-overview/

    2. Then set the mobile menu breaking point to a higher value, eg. 1085px:https://docs.generatepress.com/article/primary-navigation-layout-overview/

    3. I meant if you are using float, change to Flexbox, not the other way around.
    The gap is caused by the bottom margin of the last p element in the footer, Try this CSS:

    .site-footer p:last-child {
        margin-bottom: 0;
    }
    #2066858
    Ravi Dixit

    Hey, Ying!

    Thanks for your quick help, I fixed up all the issues.

    1. I got a recommendation from your team to use the full-width option as I have a custom width CSS added for posts and pages. But the way you suggested worked.

    It would be great if you can help me with one last thing, I have added the post grid using the GenerateBlocks plugin, I want to have a hover animated for the post grid. Can you help me with the CSS?

    It would be great if I make the go a bit up on hover like these buttons (https://prnt.sc/25qyxoc) on the GeneratePres forum.

    #2066865
    Ying
    Staff
    Customer Support

    Thanks for your quick help, I fixed up all the issues.

    Glad to hear that ๐Ÿ™‚

    For the new question, can you open a new topic and link us to the page in question?
    I’ll be happy to help there!

    #2066874
    Ravi Dixit

    Everything is working great except the sticky header, the nav menus align to centre on Sticky nav https://prnt.sc/25r3aen

    #2066891
    Ying
    Staff
    Customer Support

    Add this CSS:

    nav#sticky-navigation .site-logo {
        margin-right: auto;
    }
    #2066900
    Ravi Dixit

    Why do I need to add additional CSS, it was working perfectly before?

    #2066906
    Ying
    Staff
    Customer Support

    I didn’t see how it was working before.

    If it was working perfectly before, then remove the CSS which is added recently to see which one is causing it.

    #2066911
    Ravi Dixit

    removed now, please check

    #2067316
    David
    Staff
    Customer Support

    Hi there,

    can you first disable any cache plugins to make sure they are not interfering with the CSS that Ying provided.

    #2067331
    Ravi Dixit

    Cache plugin disabled, please proceed.

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