Create call to action in the menu

Hi all,

Is it possible to create a call to action color and bold?

I put a screenshot to explain you better
http://keepfit.fr/wp-content/uploads/2017/02/exemple-astrid.jpg

Thanks, best regards
Dylan

Hello Dylan,

Please try to use the following CSS code in order to style your last menu item (whatever it is) as a button, so actually it will be a button.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#masthead nav > div > ul > li:last-child > a {
    border: 1px solid #fcd088;
    padding: 12px 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #fcd088;
}

#masthead nav > div > ul > li:last-child > a:hover {
    background-color: #fcd088;
    color: #333;
}

#masthead nav > div > ul > li:last-child > a::before,
#masthead nav > div > ul > li:last-child > a::after {
    display: none;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you so much, that’s exactly what I wanted, except for one detail, I would like to shift the buttons in second place in the menu.

Please look at the screenshot.
http://keepfit.fr/wp-content/uploads/2017/02/exemple-astrid.png

I have a second question concerning the size of the main titles of the homepage, would you prefer that I create a new topic?

Thank you for everything.
Best regards

Willig Dylan

Hello Dylan,

What exactly do you want to target, second menu item or specific menu item by ID?

Yes, please create a new topic for another question to make it easier to help you.

Kind Regards, Roman.

Hi Roman,

This is a very relevant question, in fact I would like specific menu item by ID, in my sceenshot it’s “programme minceur”.

Thanks.
Kind regards

Dylan

Dylan, can you please provide a valid link to your home page?

Kind Regards, Roman.

Yes, it’s http://keepfit.fr

Thank you Roman

Dylan

Hello Dylan,

Please try to use this CSS code instead of previous:

#masthead nav > div > ul > li.menu-item-1424 > a {
    border: 1px solid #68c195;
    padding: 3px 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #68c195;
}

#masthead nav > div > ul > li.menu-item-1424 > a:hover {
    background-color: #68c195;
    color: #333;
}

#masthead nav > div > ul > li.menu-item-1424 > a::before,
#masthead nav > div > ul > li.menu-item-1424 > a::after {
    display: none;
}

Kind Regards, Roman.

This is exactly what I wanted, thank you very much Roman.

Best regards

Dylan

You are welcome Dylan!

Kind Regards, Roman.