BuddyBoss Home – Web Support Forums Themes BuddyBoss theme Change Mobile JS Nav Panel Grey Background Color

Viewing 14 posts - 1 through 14 (of 14 total)
  • Question

    #44408
    @ericreynolds

    When viewing the mobile site and selecting either the profile (left) or main nav (right) icons in the header, under the JS panel animation that reveals the menu items, I would like to change the default grey (#313639) background that displays.

    I’ve tried numerous CSS revisions to no avail. Any suggestions?

    🙂 Eric

    Answers

    #44460

    Alyssa
    Participant
    @alyssa-buddyboss

    @ericreynolds Welcome to the BuddyBoss community! Try adding this to the mobile sections of custom.css (2.1 & 2.2):

    div#wpadminbar {
    background-color: #000000 !important;
    }
    #44470
    @ericreynolds

    Thanks TJ. I tried that already and it didn’t work. 🙁

    #44504

    Alyssa
    Participant
    @alyssa-buddyboss

    @ericreynolds Looks like you were looking at the wrong CSS. Add this to custom.css:
    .is-mobile .menu-panel{background-color:#000000;}
    NOTE you don’t even need to add this to the mobile section, you can add it to the global section

    #44746
    @ericreynolds

    Thank TJ. However, that didn’t work. 🙁

    #44844
    @vapvarun

    Hey @ericreynolds, please mark the position in a screenshot, I will provide you exact css.
    Regards

    #44857
    @ericreynolds

    Hi @vapvarun, please find attached a screenshot of the body background color I need to change. I tried the following, but it didn’t work either…

    @media screen and (max-width: 736px) {
    body {background-color: #000 !important;}

    Thank you.

    Eric

    #44941
    @vapvarun

    Hi @ericreynolds try following,
    you can warp it for your corresponding media query

    @media screen and (max-width: 736px) {
    .pop {background-color: #000 !important;}
    }

    #44963
    @ericreynolds

    Thank you Varun. Unfortunately, that didn’t do it. At this point, I am ok with the dark grey background. 🙂 Eric

    #44970
    @vapvarun

    🙂 okay

    #45884
    @oliverhartleben

    Hi, my name is Oliver from Germany.
    My problem might be, that i can’t change the background color.
    The “Comment” field is black, the words and cursor are red. Please take a look at the screenshots 2 and 3.
    If the background is white, you can`t see the items. Because, they are also white.
    If i have to change the CSS code, please send me the code.
    I hope this will solve my problem.

    /*————————————————————–
    This is your custom stylesheet.

    Add your own styles here to make theme updates easier.
    To override any styles from other stylesheets, simply copy them into here and edit away.

    Make sure to respect the media queries! Otherwise you may
    accidentally add desktop styles to the mobile layout.

    You’re the boss, so have fun editing!

    ————————————————————–
    >>> TABLE OF CONTENTS:
    —————————————————————-
    1.0 – Global Styles
    2.0 – Responsive media queries (mobile styles)
    2.1 – MAXIMUM width of 720 pixels (phones landscape)
    2.2 – MAXIMUM width of 350 pixels (phones portrait)
    2.3 – MINIMUM width of 721 pixels (tablets+)
    2.4 – MINIMUM width of 1040 pixels (desktops and laptops)
    ————————————————————–*/
    /*————————————————————–
    1.0 – Global Styles
    ————————————————————–*/

    /*
    .just_an_example {
    color: black;
    }
    */

    /*————————————————————–
    2.0 – Responsive media queries (mobile styles)
    ————————————————————–*/
    /*————————————————————–
    2.1 – MAXIMUM width of 720 pixels (phones landscape)
    ————————————————————–*/
    @media screen and (max-width: 720px) {

    /*
    .just_an_example {
    color: black;
    }
    */

    }/* don’t delete this closing bracket */

    /*————————————————————–
    2.2 – MAXIMUM width of 350 pixels (phones portrait)
    ————————————————————–*/
    @media screen and (max-width: 350px) {

    /*
    .just_an_example {
    color: black;
    }
    */

    }/* don’t delete this closing bracket */

    /*————————————————————–
    2.3 – MINIMUM width of 721 pixels (tablets+)
    ————————————————————–*/
    @media screen and (min-width: 721px) {

    /*
    .just_an_example {
    color: black;
    }
    */

    }/* don’t delete this closing bracket */

    /*————————————————————–
    2.4 – MINIMUM width of 1040 pixels (desktops and laptops)
    ————————————————————–*/
    @media screen and (min-width: 1040px) {

    /*
    .just_an_example {
    color: black;
    }
    */

    }/* don’t delete this closing bracket */

    #45888
    @ericreynolds

    Oliver, your problem has nothing to do with this thread. You need to start your own topic.

    Buddyboss? Can you bump Oliver to a new thread?

    Eric

    #45893
    @oliverhartleben

    Oh…thanks for you information.
    I just opened a thread….

    #45955
    @vapvarun

    🙂 i will close this thread.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The question ‘Change Mobile JS Nav Panel Grey Background Color’ is closed to new replies.