Docs

[mduboule]

Hi guys,

I am working on a website which sometimes triggers firewall, I hope you’ll be able to see it:

http://jazzaupeuple.ch.193.33.128.192.dev-url.ch/

I am using the Icon stack with childtheme and a specific CSS stylesheet. My question is divided in two parts:

1) I would like the desktop navigation to be similar as for the tablet one. Having the three line icon opening the full navigation and being able to close it as well. There probably is an easy CSS trick which I haven’t found yet.

2) I am trying this responsive like navigation coming from the left and not from the top, as in a fixed-left layout. I know this is a one page navigation layout and it’s not recommended to do so but this is needed and I feel I’m only few CSS lines away from getting there. I already have included a function in the functions.php file which goes this way.

// Get Navbar Positioning
// =============================================================================
if ( ! function_exists( 'x_get_navbar_positioning' ) ) :
  function x_get_navbar_positioning() {

    if ( x_is_one_page_navigation() ) {
      $output = 'fixed-left';
    } else {
      $output = x_get_option( 'x_navbar_positioning', 'static-top' );
    }

    return $output;

  }
  add_action( 'customize_save', 'x_get_navbar_positioning' );
endif;

I’m sending two pictures of what I’m trying to get at, let me know if I’ve missed any important information.

Thanks a lot for your help.

[Rue Nel]

Hello There,

Thanks for writing in!

1] To turn on the mobile menu in your site even on desktop screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(min-width: 980px){
  body.x-navbar-fixed-left-active {
    padding-left: 0 !important;
  }
 
  .x-navbar-fixed-left {
    width: 100%;
    height:0;
  }

  .x-navbar-fixed-left .x-navbar-inner {
    height: auto;
    background-color: transparent;
  }

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

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile {
    display: block;
  }
}

2] I am not sure if I get the idea of what you have in mind. Why don’t you check out SuperFly Menu. Using Superfly, you may no longer need the code above. This is a new bundled menu plugin in X. You can install it from X Addons > Extensions. For further details and examples, please check it here:
https://community.theme.co/kb/integrated-plugins-superfly/
http://superfly.looks-awesome.com/

Hope this helps.

[mduboule]

Hi Rue Nel,

Thanks a lot for your detailed answer, I was able to reach my goal using Superfly, although tweaking a lot with CSS.

One last question, what would be the easiest approach if I wanted to change the color of the three lines responsive menu icon depending on the background color (which changes on the page since this is a fixed nav) ? If you visit the website again you’ll see sometimes it disappears because of the background color which is similar — white in this case.

Thanks

[Rue Nel]

Hello There,

Thanks for the updates! To make the icon more visible even when a section with white background color is behind it, I would suggest that you use the metro style icon. Please check out this settings:
http://prntscr.com/bwqwa6

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

[Author]

Posts