Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Change order of footer nav/middle blocks


Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://beth-howley.squarespace.com/config/pages

Hi! Is there a way I can change the order of the footer middle block and the footer nav block so that the middle block (has the logo) is on the left and the nav is to the right. I attached screenshots of how it looks now vs how I would like it to look. I'm using the Brine template. 

Thank you!

Current footer:Screen Shot 2021-09-14 at 4.13.27 PM.png

How I'd like the footer:

Screen Shot 2021-09-14 at 4.14.57 PM.png

Edited by angelamanderson22
added template
Link to comment
On 9/23/2021 at 3:36 AM, angelamanderson22 said:

@tuanphan Sorry, I was editing the new template in preview mode. I made the new site live now. It's http://www.bethhowleycreative.com and the password is: michbren. Thanks!

Add to Design > Custom CSS

/* Footer layout */
div.Footer-middle {
    flex-direction: row-reverse;
}
div#footerBlocksMiddle>.row {
    display: flex;
    flex-direction: row-reverse;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • Solution
14 hours ago, angelamanderson22 said:

Thank you so much! Do you know how to make the logo sit on top of the nav on mobile instead of to the side?

Screen Shot 2021-09-26 at 12.30.44 PM.png

Use this new code

/* Footer layout */
div.Footer-middle {
    flex-direction: row-reverse;
}
div#footerBlocksMiddle>.row {
    display: flex;
    flex-direction: row-reverse;
}
@media screen and (max-width:767px) {
div.Footer-middle {
    flex-direction: column-reverse !important;
}
div#footerBlocksMiddle>.row {
    display: block;
}
div#footerBlocksMiddle {
    flex: unset;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 9/28/2021 at 6:44 AM, angelamanderson22 said:

Thank you so much!

Add to Design > Custom CSS

@media screen and (max-width:640px) {
nav.Footer-nav * {
    width: 100% !important;
    text-align: center !important;
    max-width: unset !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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