Make last menu item a button - 7.1

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.

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

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

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!

Hi @tuanphan, I managed to make the last menu item a button. But I don't like the fact that it is underlined when you hover over it. Is there any way to remove that underline only at the last menu item?

Thanks in advance!

On 2/25/2022 at 7:41 PM, amberv98 said:

Hi @tuanphan, I managed to make the last menu item a button. But I don't like the fact that it is underlined when you hover over it. Is there any way to remove that underline only at the last menu item?

Thanks in advance!

What is access password?

https://www.atelierroger.eu/

Hi @tuanphan, I've figured this one out. ☺️