Jump to content

Logo pushing header banner down too low

Recommended Posts

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!

Screen Shot 2022-04-20 at 8.46.27 pm.png

Link to comment
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!

Screen Shot 2022-04-20 at 8.46.27 pm.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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 🙂

Screen Shot 2022-04-25 at 9.13.33 pm.png

Link to comment
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 🙂

Screen Shot 2022-04-25 at 9.13.33 pm.png

You mean move this?

align.thumb.png.c5a810c9c7330ade4b73a1ddfcc451f3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 🙂

Link to comment
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

Screen Shot 2022-05-02 at 4.37.57 pm.png

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

Here is the screenshot attached

Screen Shot 2022-05-02 at 4.37.57 pm.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?)

Screen Shot 2022-05-07 at 6.36.43 am.png

Link to comment
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?)

Screen Shot 2022-05-07 at 6.36.43 am.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.