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

How to move social icons and customer account link on nav bar?


sundog

Question

  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 1
On 8/12/2021 at 7:33 PM, zzlogan said:

@tuanphan, I having a similar issue, where the social media icon isn't lining up with the Main Navigation links, as seen below.

 

Would there be a way to push the Instagram logo up to be in the same line as the Home/Blog buttons? 

website: https://pomegranate-badger-p3wd.squarespace.com/

thanks!

Screen Shot 2021-08-12 at 5.29.59 AM.png

Don't remove any code & add this code

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -10px;
}

 

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
  • 0

Thank you! How can I tweak the css code for the top right with the button, customer account, and cart to have the button and cart on the same row and customer account under the cart?

I am hoping it could like this:

Nav_header_changes.png.57b50c376296945eded097835d530516.png

Link to comment
  • 0
12 hours ago, sundog said:

Thank you! How can I tweak the css code for the top right with the button, customer account, and cart to have the button and cart on the same row and customer account under the cart?

I am hoping it could like this:

Nav_header_changes.png.57b50c376296945eded097835d530516.png

I answered on your other posts..

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
  • 0

@tuanphan, this code is working well! thank you.  One question on this.. 

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -10px;
}

Would there be a way to control the buffer space from the Header Navigation and page? 

Screen Shot 2021-08-17 at 6.10.46 AM.png

Link to comment
  • 0
19 hours ago, zzlogan said:

@tuanphan, this code is working well! thank you.  One question on this.. 

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -10px;
}

Would there be a way to control the buffer space from the Header Navigation and page? 

Screen Shot 2021-08-17 at 6.10.46 AM.png

Space between nav items - top of banner??

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
  • 0

@tuanphan, I actually was looking to get space between the list of Nav items and the start of the page.  Right now the Header Nav feels to smooshed with the start of the actual Page, and I was hoping to create a distance between the two.

Would that be possible to do? with padding maybe? 

Link to comment
  • 0

@tuanphan, hey this is working with the padding

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
  	padding: 13px;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -23px;
}

  

Link to comment
  • 0
On 8/18/2021 at 8:29 PM, zzlogan said:

@tuanphan, hey this is working with the padding

.header-display-desktop {
    flex-direction: column-reverse;
    justify-content: space-between !important;
    align-items: flex-end;
}

.header-title-nav-wrapper {
    flex: 1 0 100% !important;
    width: 100%;
  	padding: 13px;
}

div.header-actions {
    justify-content: flex-end !important;
}

.header-display-desktop {
    flex-direction: row-reverse !important;
}
.header-actions.header-actions--left {
    position: relative;
    top: -23px;
}

  

Hi.

Sorry for the delay. Do you still need help?

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