Mobile menu dropdown link colors

[Frederick Frahm]

Hi Bill,

Love the Kerygma template!

But one issue: is there a way to get my mobile drop menu to have the same color scheme as my primary site? At the moment, I am finding that the links are the same color as the main content scheme and that I can’t seem to designate those colors separately in the navigation section of the customize page in ‘Appearance’. I do see the designation on the customize page as to ‘mobile’ or ‘primary’, but am wondering if I need to attend to this somewhere else.

Thanks,

Fred

[Bill Robbins]

Hello Fred,

I’m glad you’re loving the theme. Great question too. There aren’t separate, built in controls for the mobile colors, but you can still change them. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   
   .slicknav_btn { 
   	background-color: #ccc;
   }
   
   .slicknav_menu .slicknav_icon-bar {
   	background-color: #000;
   }
   
   .slicknav_nav {
   	background-color: #ccc;
   }
   
   .slicknav_nav a,
   .slicknav_nav {
   	color: #000;
   }
   
   .slicknav_nav a:hover {
   	color: #fff;
   }
   

   The first color is for the background of the “hamburger” icon button.
   The second color is for the lines in the “hamburger” icon.
   The third color is the background of the drop-down menu.
   The fourth color is for the text and links in the drop-down menu.
   The last color is the hover color for the links in the drop down menu.

   Change those to fit your needs.

3. Update your settings.

See if that doesn’t do the trick for you. If you have any trouble, let me know.

Thanks,
Bill

[Frederick Frahm]

This reply has been marked as private.

[Bill Robbins]

Glad that did the trick Fred. Have a fantastic 2015 🙂

Bill

[Author]

Posts