Mobile menu is now transparent

Support
#1

site is celebrationchurchnc.com

when we updated last, the menu on a mobile device went completely transparent.

we need 2 things:

  1. how do we change the bg color of the mobile menu, and also make the page content slide down when the menu is clicked. same thing for menu items that have sub menu items.

  2. how do we change the menu bg for desktops?

thanks!

#2

Hello @happycowstudios,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.x-btn-navbar.collapsed, .x-btn-navbar.collapsed:hover { /* mobile menu background color*/
    background-color: #ddd;
    color: #000;
}

.x-navbar {
    background-color: #ddd; /* to change background color on desktop*/
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

thanks. i should have been more specific. my apologies.

i am referring strictly to…

  1. desktop: when a main menu item is hovered, it drops down a sub menu. some of those sub menu items also have a submenu dropdown. i don’t need to change the bg color of the menu bar itself, only when it drops down the sub menu. the bg color of the dropdown and the text color.

  2. mobile: same thing. not the main menu icon, just the dropdown. if you check it on a mobile device, the dropdown is transparent. when the main menu icon is clicked, i’d like the content on the page to move down, and to be able to change the bg color and text color of the dropdown menu.

that make sense?

thanks so much!

shaun

#4

ok. using the youtube links you sent, i was able to figure out how to change the bg color of the dropdown.

but how do i move the words over a bit to the right?

#5

never mind. lol. figured that out too.

only thing i can’t figure out now, is how to move the page content down to make room for the dropdown, when the main menu icon is selected on a mobile device.

please help.

thanks!

shaun

#6

Hi Shaun.

Please try this code in X > Theme Options > CSS:

@media (max-width: 979px) {
    .x-navbar {
        position: relative;
        height: auto;
    }

    .x-navbar.x-navbar-fixed-top {
        position: fixed;
    }

    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Here are some related links of the suggestions above for further reading:

Hope this helps.

#7

thanks so much! that worked great!

#8

You’re most welcome!

#9

one more thing…

when i make the .x-topbar fixed, the page content then moves up and is covered by it. the main menu is still fixed, it’s just covered by the top bar. how do i fix this?

thanks!

shaun

#10

Hello Shaun,

Adding a custom css to have the topbar fixed in mobile device or smaller screens will only create conflict or issues. You will need a combination of JS and custom css to be able to resolve this.

  • Please add this custom JS in X > Them Options > JS
jQuery(function($) {

 if( $(window) > 979 ) {

   $(window).scroll(function(){
    if($(window).scrollTop() > 0 ){
    	$('.x-topbar').addClass('x-topbar-fixed');
    } else {
    	$('.x-topbar').removeClass('x-topbar-fixed');
    }
  });

 }

});
  • And then use this custom css:
@media(max-width: 979px){
  .x-topbar.x-topbar-fixed {
    position: fixed;
    width: 100%;
    top: 0;
  }

  .x-navbar.x-navbar-fixed-top,
  .x-main {
    top: 95px;
  }
}

For reference, you can check out this thread: https://theme.co/apex/forum/t/create-a-fixed-top-bar/41675/5

We would loved to know if this has work for you. Thank you.

#11

works great. thanks so much!

#12

You are most welcome. :slight_smile:

#13

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