Docs

[flacnvinyl]

I love the ‘lean’ design of X, but can’t live without some of the fancy features in UberMenu. On desktop and tablet, no issues. However, on mobile, UberMenu places a solid bar across the device. It is possible to set UberMenu to display a hamburger menu like the default X nav JUST for mobile? Then when clicked it opens the full menu as designed in UberMenu?

[flacnvinyl]

This reply has been marked as private.

[Rad]

Hi Drake,

Thanks for posting in.

How about just removing the black navbar on mobile? The hamburger is part of the menu, moving it around may affect the layout. But yes, maybe possible by custom coding.

Let’s try this CSS,

@media screen and (max-width: 959px){
.ubermenu-responsive-default.ubermenu-responsive.ubermenu {
    margin: 0;
    position: relative;
    top: -80px;
}
.ubermenu-skin-black-white-2.ubermenu-responsive-toggle:hover {
    background: transparent;
    color: #ffffff;
    float: right;
    position: relative;
    top: -80px;
    border: 0px;
    box-shadow: none;
}
}

Thanks!

[flacnvinyl]

This reply has been marked as private.

[Christopher]

Hi there,

Please update previous code to :

@media (max-width: 959px){
.ubermenu-skin-black-white-2.ubermenu-responsive-toggle:hover {
    background: transparent;
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
}
.ubermenu-skin-black-white-2.ubermenu-responsive-toggle {
    background: #222222;
    color: #eeeeee;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    width: 100px;
    float: right;
}
}

Hope it helps.

[flacnvinyl]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates. To make the icon and menu bigger and transparent on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 959px){
  .site .ubermenu-skin-black-white-2.ubermenu-responsive-toggle,
  .site .ubermenu-skin-black-white-2.ubermenu-responsive-toggle:hover {
    background: transparent;
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
    font-size: 18px;
    width: 130px;
  }
}

Hope this helps. Please let us know how it goes.

[flacnvinyl]

This reply has been marked as private.

[flacnvinyl]

This reply has been marked as private.

[Rad]

Hi there,

There is one error,

Uncaught TypeError: $ is not a function

And it’s originating from custom javascript. Please change it to this,

 jQuery(function($) {

   function fix_navbar_position() {
         $('.x-navbar.x-navbar-fixed-top').css('top', $('.x-topbar').height());
     }
     fix_navbar_position();
     $(window).load(fix_navbar_position).resize(fix_navbar_position);

     $(document).ready(fix_navbar_position());
  

 $(window).scroll(function() {
     var scroll = $(window).scrollTop();

     if (scroll >= 500) {
         $(".x-navbar").addClass("x-navbar-fixed-top");
     } else {
         $(".x-navbar").removeClass("x-navbar-fixed-top");
     }
 });
 
 });

Then add this CSS as well,

@media ( max-width: 979px ) {

.x-navbar-fixed-top {
position: fixed !important;
width: 100%;
}

}

Hope this helps.

[flacnvinyl]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! I would highly suggest that you organize first your custom css first. The best practice is by using this kind of format.

.element {
  // some styling here
}

@media(min-width: ###){
  .element {
    // some styling here
  }
}

@media(max-width: ###){
  .element {
    // some styling here
  }
}

Having this kind of format will be easy to find any invalid css. It should be noted that the @media block shall always be at the bottom of the other css to prevent from being overwritten by any other custom css that you have.

Hope this make sense. Please let us know how it goes.

[flacnvinyl]

This reply has been marked as private.

[Jack]

Hi Drake,

I’ve taken a look at this for you and have commented out the following JS in your customizer > Custom > Javascript.

$(window).scroll(function() {
     var scroll = $(window).scrollTop();

     if (scroll >= 500) {
         $(".x-navbar").addClass("x-navbar-fixed-top");
     } else {
         $(".x-navbar").removeClass("x-navbar-fixed-top");
     }
 });
 
 });

This was affecting the menu and only adding the fixed top class after scrolling 500 pixels. If you could check and confirm the site now works correctly that would be great. The code is still there, in case it was for something else and in that case we can take another look and come up with another solution.

Thanks!

[flacnvinyl]

This reply has been marked as private.

[Author]

Posts