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

[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.

[Leo]

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 🙂

[Ravi Dixit]

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

[Ying]

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.

[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?

[Ying]

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

[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.

[Ying]

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!

[Ravi Dixit]

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

[Ying]

Add this CSS:

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

[Ravi Dixit]

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

[Ying]

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.

[Ravi Dixit]

removed now, please check

[David]

Hi there,

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

[Ravi Dixit]

Cache plugin disabled, please proceed.

[Author]

Posts