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

Make last menu item a button - 7.1


PacoJones

Question

3 answers to this question

Recommended Posts

  • 0
Posted (edited)
1 hour ago, PacoJones said:

Site URL: https://www.chalkrestaurants.com/

Hi, I've tried various bits of css suggested in related questions on here but no joy.

I want to turn the last item (Book Now) in the navigation on my site into a square CTA button like in the footer. Can anyone help with the right css to do this?

Thanks in advance.

try

.header-nav-list .header-nav-item:last-child a {
    color: #283e2a;
    border-color: #283e2a;
    background: #283e2a;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    padding: 1.3rem 2.171rem;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
}
.header-nav-list .header-nav-item:last-child a:hover {
    background: #e1ccbe;
    border-color: #e1ccbe;
    color: #283e2a;
}
.header-nav-list {
    align-items: center;
}

image.thumb.png.02a35ee576b3f46556c0f16d7326b318.png

Edited by bangank36

Greeting, it's BaNgan from 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, Youtube Gallery for Squarespace
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
  • 0
Posted (edited)
1 hour ago, bangank36 said:

try



.header-nav-list .header-nav-item:last-child a {
    color: #283e2a;
    border-color: #283e2a;
    background: #283e2a;
    border-width: 2px;
    border-style: solid;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    padding: 1.3rem 2.171rem;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
}
.header-nav-list .header-nav-item:last-child a:hover {
    background: #e1ccbe;
    border-color: #e1ccbe;
    color: #283e2a;
}
.header-nav-list {
    align-items: center;
}

image.thumb.png.02a35ee576b3f46556c0f16d7326b318.png

Hi BaNgan,

Thanks - I added your code to the Custom CSS but nothing changes. I've left the code in place in case that helps see why it isn't working.

Edit - there was a Syntax issue with some custom css added previously, I've fixed it and now the changes are showing.

Thank you!

Edited by PacoJones
Link to comment
  • 0

@PacoJonesDo you need to improve these?

Site URL – https://www.chalkrestaurants.com/

1. (Tablet-Footer) Increase email text width?

chalkrestaurants.com-01-min.png

2. (Tablet-Homepage) Reduce text size?

chalkrestaurants.com-02-min.png

3. (All screens-Breakfast Menu) Change logo color?

chalkrestaurants.com-03-min.png

4. (Tablet-What’s on) Increase content width?

chalkrestaurants.com-04-min.png

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