CSS changes and priority

Dear All,

I’m a bit struggling with CSS amendments and priority and since I’m learning on my own, I’m in lack of guideline.

Unfortunately, the website is not yet online.

So I have added this underline fancy effect on the vertical menu :

.effect-one #site-navigation-wrap .dropdown-menu>li>a.menu-link>span:after {
    display: block;
    background-color: #13aff0;
    position: absolute;
    bottom: -30%;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    visibility: hidden;
    -moz-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: bottom left;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;

I wanted to make it thiner, so I inspect in Chrome, and copy the below code in Customizer > Custom CSS/JS :

.effect-one #site-navigation-wrap .dropdown-menu>li>a.menu-link>span:after {
    display: block;
    background-color: #13aff0;
    position: absolute;
    bottom: -30%;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    visibility: hidden;
    -moz-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    transform-origin: bottom left;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;

Is that the right way to do it ? Should I add this in the child css instead ? It seems both CSS code are shown when I inspect in Chrome. I’m really not sure how this should be done.

Things is that the police menu should be Capitalized (typography > menu), and it’s not the case anymore, I believe it’s a side effect from the change of underline pixel height. Would you please mind to explain me what I’m doing wrong ? Thank you.

#site-navigation-wrap .dropdown-menu >li >a, #site-header.full_screen-header .fs-dropdown-menu >li >a, #site-header.top-header #site-navigation-wrap .dropdown-menu >li >a, #site-header.center-header #site-navigation-wrap .dropdown-menu >li >a, #site-header.medium-header #site-navigation-wrap .dropdown-menu >li >a, .oceanwp-mobile-menu-icon a {
    font-family: Roboto;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 4.3px;
    text-transform: capitalize;

Thank you vm for your help !
Cyril.

• This topic was modified 5 years, 11 months ago by cyrilruf.