Docs

[skirttheceiling]

Hi,

I’d like to change the color of my mobile menu. Can you tell me where I can do that?

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-btn-navbar.collapsed {
    color: #fff !important;
}

Thanks.

[skirttheceiling]

Hi thanks!

That seemed to only change the 3 lines on the nav button, can you tell me how to change the background color of the button?

[Prasant Rai]

Hello There,

Thanks for writing in1

Please replace the code with the one given bellow:

a.x-btn-navbar.collapsed {
    background-color: #ddd !important;
    padding: 0 5px;
    color: #fff !important;
}

Thanks.

[skirttheceiling]

Hi thanks,

Can you tell me how to do the padding correctly? For some reason if I put 0 as you suggested then it is too close to the top and not centered to the bar. But if I put anything greater than 0, there is a small shadow that hangs over the bottom of the nav bar that looks off.

Also, how do I make the search icon visible on mobile? I’d like for it to be just to the left of the mobile menu.

[Christopher]

Hi there,

Please find this code :

a.x-btn-navbar.collapsed {
    background-color: #000000 !important;
    padding: 2 0px;
    color: #ffffff !important;
}

And update it to :

a.x-btn-navbar.collapsed {
    background-color: #000000 !important;
    padding: 2 0px;
    color: #ffffff !important;
    box-shadow: none;
}

Copy _navbar-primary.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 
<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
  <a href="#" class="x-btn-navbar-search"><span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a>
</div>

<?php endif; ?>

Hope it helps.

[skirttheceiling]

Hi thanks,

I tried the box-shadow:none, but it seems to still give me a slight shadow past the nav bar.

Also sorry for the multiple questions, but how do I change the color of the mobile menu when it’s selected. right now when it’s selected it’s white on white which looks odd.

Thanks,
Christy

[skirttheceiling]

Sorry I just rechecked and the shadow is indeed gone, so I’m good on that.

Is there a way to make the mobile menu turn into an “X” like what happens on the lululemon.com mobile site?

[Nabeel A]

Hi again,

That can be done with custom CSS, please add the following code in your Child Theme’s style.css file:

a.x-btn-navbar.collapsed i:before {
    content: '\f0c9' !important;
}
.x-btn-navbar i:before {
    content: '\f00d' !important;
}

Cheers!

[skirttheceiling]

Hi, just to clarify when I go into custom CSS and I edit global CSS is that different than what you’re talking about? How do I get to the Child Theme’s style.css file?

[Rahul]

Hey There,

Can you please confirm you have a child theme setup done already https://community.theme.co/kb/how-to-setup-child-themes/ ?

Thanks

[skirttheceiling]

Yes I have done that

[Nico]

Hi There,

Please confirm if the style.css is already in the child theme file if not, you can add a style.css file.

Or you can download again the child theme here, https://community.theme.co/child-theme/ then reinstall it again.

For more details about customization, https://community.theme.co/kb/customization-best-practices/

Let us know how it goes.

Hope it helps.

Thanks.

[skirttheceiling]

Hi,

I’m sorry can you help me figure out where I would check if i added the style.css file?

[Nico]

Hi There,

Your style.css should be in the folder or file with your functions.php. If you still could not be able to add the style.css, please share us your FTP so we could add it for you.

Don’t forget to make it private reply.

Thanks.

[Author]

Posts