Jump to content

Button positioning

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Hi. I don't see button now. Did you remove it?

You can also consider add a Link item to Last Nav item, then we will give the code to turn it to button style.

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

1- i added it back to the nav bar, i wanted it to be aliged with the logo in the top right with the same styling, thank you.
2- also i would like to costumize it on mobile so it matches the desktop, same posution in the photo but different colors.
Thank you. 
 

image.thumb.png.113d1b8e19c6244342539f9ba6d55f41.png

 
On 9/21/2022 at 10:04 AM, tuanphan said:

Hi. I don't see button now. Did you remove it?

You can also consider add a Link item to Last Nav item, then we will give the code to turn it to button style.

Edited by ismailelaaddioui
Link to comment

Add to Design > Custom CSS

header#header [class*="-item--homepage"] a {
    border: 1px solid #edcd9b;
    padding: 10px 30px;
    display: inline-block;
    border-radius: 300px;
}
header#header [class*="-item--homepage"] a div {
    text-decoration: none !important;
    border: none !important;
    background-image: none !important;
}
nav.header-nav-list {
    align-items: center;
}

 

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
5 hours ago, tuanphan said:

Add to Design > Custom CSS

header#header [class*="-item--homepage"] a {
    border: 1px solid #edcd9b;
    padding: 10px 30px;
    display: inline-block;
    border-radius: 300px;
}
header#header [class*="-item--homepage"] a div {
    text-decoration: none !important;
    border: none !important;
    background-image: none !important;
}
nav.header-nav-list {
    align-items: center;
}

 

Thank you, Now it looks like this with the underline, i wonder if we can remove it and have a hover effect where the colors changes

image.thumb.png.ff59f4b3368a3d48df4d125da4430af8.png

also i would like to have the button alighned with logo, see the screenshot below:
thank you. 
 

image.thumb.png.516951f9cef6e18a4d6ea173dccb8a4e.png

Link to comment
On 9/28/2022 at 4:38 PM, ismailelaaddioui said:

Thank you, Now it looks like this with the underline, i wonder if we can remove it and have a hover effect where the colors changes

image.thumb.png.ff59f4b3368a3d48df4d125da4430af8.png

also i would like to have the button alighned with logo, see the screenshot below:
thank you. 
 

image.thumb.png.516951f9cef6e18a4d6ea173dccb8a4e.png

Use this code

a.theme-btn--primary.btn.sqs-button-element--primary {
    border-color: var(--menuOverlayNavigationLinkColor) !important;
    color: var(--menuOverlayNavigationLinkColor) !important;
}

 

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.