Logo pushing header banner down too low

Site URL: https://www.nourish.melbourne

Hello SS Community,

I am struggling with the layout of a certification logo on my site.

I would like the logo to sit to the right of the banner page title. At the moment, it sits to the right but pushes the page title down too far. I had to add a whole new 'section' above the title banner to avoid the logo ruining the payout of my title as the small logo below goes out of shape along with the width of the sub heading. 

Is there anyway I can make this look neater and eliminate the huge gap above the title but not compromise the layout of all the banner objects?

Pages: 'directory' and 'nm for business'

Site: www.nourish.melnourne
Password: NM2022!

3 hours ago, michaelpga said:

Site URL: https://www.nourish.melbourne

Hello SS Community,

I am struggling with the layout of a certification logo on my site.

I would like the logo to sit to the right of the banner page title. At the moment, it sits to the right but pushes the page title down too far. I had to add a whole new 'section' above the title banner to avoid the logo ruining the payout of my title as the small logo below goes out of shape along with the width of the sub heading. 

Is there anyway I can make this look neater and eliminate the huge gap above the title but not compromise the layout of all the banner objects?

Pages: 'directory' and 'nm for business'

Site: www.nourish.melnourne
Password: NM2022!

I check that the logo and the banner are in different block, so we can not make the logo align on the right of banner.

I think you can add the image block in the banner section. After that, we can run some Css to align it

Hope that it makes sense

On 4/21/2022 at 12:38 AM, bangank36 said:

I check that the logo and the banner are in different block, so we can not make the logo align on the right of banner.

I think you can add the image block in the banner section. After that, we can run some Css to align it

Hope that it makes sense

Hello @bangank36

Thank you for your reply.

I have placed the logo beside the heading in the banner section on both the 'nm for business' page and 'directory' page. Can you please help me align the certification logo to be underneath the 'become a member' button?

See screenshot attached for how the alignment of the banner should look.

www.nourish.melbourne
PW: NM2022!

Thank you 🙂

On 4/25/2022 at 6:19 PM, michaelpga said:

Hello

Thank you for your reply.

I have placed the logo beside the heading in the banner section on both the 'nm for business' page and 'directory' page. Can you please help me align the certification logo to be underneath the 'become a member' button?

See screenshot attached for how the alignment of the banner should look.

www.nourish.melbourne
PW: NM2022!

Thank you 🙂

You mean move this?

On 4/27/2022 at 5:04 PM, tuanphan said:

You mean move this?

Yes please! Is that possible? The site is now live so we would really appreciate your help with this asap! Thank you kindly!

Just now, michaelpga said:

Yes please! Is that possible? The site is now live so we would really appreciate your help with this asap! Thank you kindly!

I also don't want the placement of the logo to create a large space between the header title and navigation menu - can this space please be kept the same as the other pages? Thank you!

On 4/28/2022 at 5:17 PM, michaelpga said:

I also don't want the placement of the logo to create a large space between the header title and navigation menu - can this space please be kept the same as the other pages? Thank you!

With nm for business, try adding this to Design > Custom CSS

/* nm for business logo */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1649295043363_4653 {
    position: absolute;
    right: 2vw;
    top: 0;
    z-index: 9999;
    width: 150px;
}}

23 hours ago, tuanphan said:

With nm for business, try adding this to Design > Custom CSS

/* nm for business logo */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1649295043363_4653 {
    position: absolute;
    right: 2vw;
    top: 0;
    z-index: 9999;
    width: 150px;
}}

 

Hey @tuanphan

Thanks, you're a wizz. It is almost perfect BUT could we possibly have the logo shifted to the right a tiny bit more so it's more in line with the 'become a member' button?

Also, for the mobile view, can you please help me decrease the size of the certification logo by about 65%?

Thank you kindly 🙂

2 minutes ago, michaelpga said:

Hey @tuanphan

 

Thanks, you're a wizz. It is almost perfect BUT could we possibly have the logo shifted to the right a tiny bit more so it's more in line with the 'become a member' button?

Also, for the mobile view, can you please help me decrease the size of the certification logo by about 65%?

Thank you kindly 🙂

Here is the screenshot attached

On 5/2/2022 at 1:52 PM, michaelpga said:

Here is the screenshot attached

The site has 1400px max-width, so if you use a bigger screen, you will see problem on screenshot. Use this new code

/* nm for business logo */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1649295043363_4653 {
    position: absolute;
    right: 2vw;
    top: 0;
    z-index: 9999;
    width: 150px;
}
[data-section-id="61d530df04118c04a5d1b17f"] .content-wrapper {
    max-width: 100%;
}}

On 5/5/2022 at 6:52 PM, tuanphan said:

The site has 1400px max-width, so if you use a bigger screen, you will see problem on screenshot. Use this new code

/* nm for business logo */
@media screen and (min-width:992px) {
div#block-yui_3_17_2_1_1649295043363_4653 {
    position: absolute;
    right: 2vw;
    top: 0;
    z-index: 9999;
    width: 150px;
}
[data-section-id="61d530df04118c04a5d1b17f"] .content-wrapper {
    max-width: 100%;
}}

 

Thanks @tuanphan - that looks better. Can you please help me decrease the logo for mobile view? See screenshot

And another questions - is having the site set to 1400px max-width, the best width for websites that are viewed on all devices (laptop, desktop, mobile and tablet?)

On 5/7/2022 at 3:38 AM, michaelpga said:

Thanks @tuanphan - that looks better. Can you please help me decrease the logo for mobile view? See screenshot

And another questions - is having the site set to 1400px max-width, the best width for websites that are viewed on all devices (laptop, desktop, mobile and tablet?)

Add this CSS

/* nm for business logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1649295043363_4653 {
    width: 30%;
	margin:0 auto;
}}

On 5/8/2022 at 7:02 PM, tuanphan said:

Add this CSS

/* nm for business logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1649295043363_4653 {
    width: 30%;
	margin:0 auto;
}}

 

Hi @tuanphan - the above code did not work? The certification logo remains far too large on the mobile screen. Can you suggest any changes? Thanks

On 5/10/2022 at 6:41 PM, michaelpga said:

Hi @tuanphan - the above code did not work? The certification logo remains far too large on the mobile screen. Can you suggest any changes? Thanks

I see the code worked here. Try checking in incognito window

On 5/13/2022 at 5:40 PM, tuanphan said:

I see the code worked here. Try checking in incognito window

Yes! Thank you kindly - it has worked 😉