Mobile menu custom color

Support
#1

Hi, I am trying to change the background color and link colors on the mobile menu on this page to be more visible: http://daystarpeacecd.wpengine.com/
doesn’t seem to change anything when I add custom CSS

#2

Hi @daystartv,

Thank you for reaching out to us. You can add the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .home .x-navbar .mobile .x-nav li>a {
        color: #fff !important;
        background-color: rgba(0,0,0,0.5) !important;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

#3

Thank you! This worked well for the home page. Doesn’t change this for the rest of the pages? It just defaults to white. I only see one place to change the navigation items, without adding custom code. Even on desktop I had to write custom CSS to change the menu to display correctly on the other pages.
So in short, the home page menu needs to look different from the other pages.

#4

Hi there,

The code above only targets the menu items for the home page. If you want to change the color of the menu items for the other pages, please update the code to:

@media screen and (max-width: 979px) {
    .home .x-navbar .mobile .x-nav li>a {
        color: #fff !important;
        background-color: rgba(0,0,0,0.5) !important;
    }

    .x-navbar .mobile .x-nav li>a {
        color: #fff !important;
        background-color: rgba(0,0,0,0.5) !important;
    }
}

Please change the color and background color you want to use for other pages in the block:

    .x-navbar .mobile .x-nav li>a {
        color: #fff !important;
        background-color: rgba(0,0,0,0.5) !important;
    }

Hope this helps.

#5

Thank you, that’s part of it.
When collapsed the menu icon on the other pages is invisible, how do I change it to appear on the white background, or change that white background to another color on mobile so that the hamburger icon is visible?

#6

Hi There,

To change the color of mobile navbar button, please also add this custom CSS:

body:not(.home) a.x-btn-navbar {
    color: #000 !important;
}

If you would like to change the background color of navbar as well, please add this CSS:


@media (max-width: 979px){
    body:not(.home) .x-navbar {
        background-color: #f0f0f0;
    }
}

Hope it helps :slight_smile:

#7

Yes, thank you! Looks like we’re all set now. Appreciate your help.

#8

Glad we were able to help you :slight_smile:

#9

Thank you! Sorry, ran into one other little issue. On the desktop view, after clicking on a certain page, the nav item doesn’t stay selected, dark and underlined. I tried adding a visited style, but doesn’t seem to affect it.

#10

Hi There,

Please also add this custom CSS:

.x-navbar .desktop .x-nav > .current-menu-item > a{
    color: #18414c !important;
    border-bottom: 2px solid #18414c;
    text-decoration: none;
}

Hope it helps :slight_smile:

#11

Thank you! This helps, however then the home page navigation is affected, and it should be a lighter color. Can I exclude the home page nav from this?

#12

Hi There,

Please update the previous CSS to this:

body:not(.home) .x-navbar .desktop .x-nav > .current-menu-item > a{
    color: #18414c !important;
    border-bottom: 2px solid #18414c;
    text-decoration: none;
}

Hope it helps :slight_smile:

#13

Perfect! Thank you so much.

#14

If you need anything else feel free to create a new ticket :slight_smile:

#15

Sorry, one more issue I’m running into, I updated the theme and now the mobile menu is not working…

#16

Hi there,

If you have updated X to the latest version, please also make sure that you update Cornerstone as well as it will result to an incompatibility issue if only one of them is updated. Here is a link for a details information on how to do an update:

Please remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors or any unexpected display issue on the site.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.