Archived topic

How to custom just a part of the main menu.

9 replies · Started by Laurent on February 26, 2021

Viewing posts 1–10 of 10

February 26, 2021 at 12:29 am #1673266

Hi,

I'm trying to customize just a part of a text in the main menu. See the picture here : https://www.screencast.com/t/mGnxErnv
So, I added a class for it.
But unfortunately, I can't change the main color (black in this case) to white.
I used the "!important" but without success.

Any idea how to change the color of the blue button showing ?

Thanks for your help.

Laurent.

Here the CSS I added :

/* --- BOUTON COMMANDER ---*/
.bouton-commander {
background-color: #8ed1fc; /* Blue */
border: none;
color: #ffffff !important ;
padding: 0px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2px 1px;
cursor: pointer;
border-radius: 12px;
}

February 26, 2021 at 2:47 am #1673443

Hi there,

can you link me to the site so i can see what the issue is ?

February 26, 2021 at 3:04 am #1673457

Sure David ! Here is the link https://www.sepoi.com/

February 26, 2021 at 5:08 am #1673564

Your CSS selector needs to be more specific and the styles should be applied to the <a> element like so:

.main-navigation li.bouton-commander a,
.main-navigation li.bouton-commander.current-menu-item a {
    background-color: #8ed1fc;
    border: none;
    color: rgb(240,96,204) !important;
    padding: 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 2px 1px;
    cursor: pointer;
    border-radius: 12px;
}

For your hover styles you would use:

.main-navigation li.bouton-commander:hover a {
    /* hover styles here */
}

February 26, 2021 at 7:37 am #1673936

Many thanks ! It works.

February 26, 2021 at 5:30 pm #1674440

Glad to hear that

February 26, 2021 at 11:45 pm #1674597

Hi,

Just a last thing.
When I am on the specific page linked to the button I create with the CSS, the button is showing only when hover. But not in a static mode.
How can I do to display it as set ?
You can see the demo video here : https://www.screencast.com/t/62p10XsWkqq

Thanks.

February 27, 2021 at 6:51 am #1675032

I have updated the CSS above to fix that.

February 27, 2021 at 9:30 am #1675196

Thank you !

February 27, 2021 at 2:39 pm #1675466

You're welcome

This archived topic is closed to new replies.

Start building better websites today.