Mobile header background

  • I want to change the mobile background color to black, and a couple of other colors setting in it, it seems like there is no setting affecting it in OceanWP (and using Elementor).
    I tried to add some custom CSS in the personalise section but it doesn’t not reflect.
    Here is what I added :

    /* Fond noir pour le menu mobile */

    sidr, sidr-main,
    .oceanwp-mobile-menu {
    background-color: black !important;
    }

    /* Bordures jaunes pour les éléments du menu mobile */

    sidr li, sidr ul, sidr-main li, sidr-main ul,
    .oceanwp-mobile-menu ul li {
    border-bottom: 1px solid #f2ca01 !important;
    }

    /* Couleur du texte des liens du menu mobile */

    sidr a, sidr-main a,
    .oceanwp-mobile-menu li a {
    color: #f2ca01 !important;
    }

    /* second try Fond noir pour le menu mobile */
    @media (max-width: 959px) {
    #mobile-dropdown {
    background-color: black;
    }
    }

    Anyone with an idea ?


    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @srkrag,

    Thank you for reaching out,

    Can you send a few screenshots of the sections you want to style?

    You can upload your files to one of the following online services:
    https://postimages.org
    https://drive.google.com
    Or any other service you know.

    This way, I can see the current styling status of that section. Sometimes, if there are CSS errors, it can affect all styles from that point onward.

    In such cases, please use online tools to check your custom CSS and make sure it’s correct.

    Your custom CSS hasn’t set as classes for some items, instead of that, use the following CSS:

    .sidr, .sidr-main, .oceanwp-mobile-menu {
    background-color: black !important;
}

.sidr li, sidr ul, .sidr-main li, .sidr-main ul, .oceanwp-mobile-menu ul li {
    border-bottom: 1px solid #f2ca01 !important;
}

.sidr a, .sidr-main a, .oceanwp-mobile-menu li a {
    color: #f2ca01 !important;
}

@media (max-width: 959px) {
    #mobile-dropdown {
        background-color: black;
    }
}

    Note 1: Where you have an Elementor section, you must set the styling in Elementor settings.

    Note 2: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools.

    I hope it helps,
    Best Regards

    Thread Starter srkrag

    (@srkrag)

    Thanks for your prompt reply, I was off and only get back to you know.

    I’ve tried your code with no success, I upload 3 screens shot so you can see the CSS property that are not working (background should be black, and line to separate the list yellow.

    Here the link you can look it up

    https://drive.google.com/drive/folders/17NdVMbt622aqmIFKhyyrFLIH9FImLQxF?usp=sharing

    I appreciate your help ??
    BR

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.