[andrewf90]

Hi!

I’m wondering how do you change the default black colour for the primary menu bar that runs across just below the website name to green?

Also, I believe on Catch Box, the green colour bar appears on both the desktop and mobile sites. On Catch Flames, the desktop site has the black bar, but the mobile site has no colour bar. How can we add that same same Catch Box has?

Thanks, you guys are awesome!

[Pratik]

Hi @andrewf90,
If you upgrade to Catch Flames Pro, you will have the option to change the primary menu background color to any color with live preview with a ton of other features, described here. In free version, you will need to do it with custom CSS. In Appearance=> Customize=> Theme Options=> Custom CSS box, add following code:

#header-menu #access { 
   background-color: #dd9933; 
}

You can change the #dd9933 value to any value you like for hex color.

About the mobile site, Catch Flames and Catch Box have different design elements so a mobile menu bar is not suited for this theme. However, if you want it, you can add following CSS in above mentioned place which will make a menu bar:

.mobile-menu {
    background-color: #dd9933;
    width: 100%;
}

[andrewf90]

Wow, that’s great. It works like magic. lol. Um. For the mobile site header bar, the bar that runs across the mobile menu becomes a solid colour, which is perfect. But what I would like to do instead is add that colour bar at the bottom of the header for the mobile site so there’s a coloured bar that separates the header from the page border. I hope that’s not confusing.

Sorry for the trouble, and thank you again for all your help!

[Pratik]

hi @andrewf90,

By solid colored bar, do you want to move the menu at the bottom of the header, or do you want another solid bar(leaving the menu in its place) or do you want a solid color bar between the header and page(in the small gap)?

Regards,
Pratik

[andrewf90]

Hi, Pratik!

When I posted that message, I was thinking about how it would look like moving the menu to the bottom of the header. Would it be too much trouble to get the code to see what it will look like: i) moving the menu bar to the bottom and ii) to have a solid colour bar between the header and page?

Thanks again for all your help! I appreciate it a lot.

[Pratik]

hi andrewf90,
For both conditions, you will need to make a child theme and do some customizations. For child theme, you can find the details here.

Then in your child theme’s functions.php add following codes:
i)Moving the menu bar to the bottom:

/**
 * Move mobile nav
 *
 */
function catchflames_child_move_mobile_nav() {
	remove_action( 'catchflames_headercontent', 'catchflames_main_mobile_menu', 10 );

	add_action( 'catchflames_headercontent', 'catchflames_main_mobile_menu', 40 );
}
add_action( 'init', 'catchflames_child_move_mobile_nav' );

ii)To have a solid color bar between the header and page:
In Appearance=> Customize=> Theme Options=> Custom CSS box, add following code:

@media screen and ( max-width: 940px ) { 
   #branding {
      border-bottom: 30px solid #dd9933;
   }
}

Change #dd9933 to your desired color hex value.
For (ii), if this is not what you were thinking of, you will need to ad a different div and give it style. To do this, you will need to hire a customizer as this falls outside of the theme support scope.

Regards,
Pratik

[andrewf90]

Hey,

The code in the second option looks perfect!

Thank you!

[Pratik]

Hi andrewf90,

Glad everything worked out. If you liked our theme and support, please leave a review at here.

Thanks,
Pratik

[andrewf90]

I did! It was a pleasure. Thanks.

[Author]

Posts