Responsive Menu in mobile view

[armpouniotis]

Hi there !

I am struggling to make a responsive menu for mobiles. I am looking at five template and it is really complicated....

Can someone explain, step by step, how to make it (lets say for media rule 650px)

Thank you in advance

Christos

[nikos]

Read this article which explains how to create a responsive top navigation menu with CSS and JavaScript

[armpouniotis]

Hi there !

I have tried that many times, modifying it according to elxis build-in div classes.

According to this code https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav:

I managed to hide the menu (in mobile view) and show the small horizontal lines, but when I click these horizontal lines, the menu doesn't appear....

Here:
<div class="tpl5_menu_wrap" id="myTopnav">
<?php $eDoc->modules('menu'); ?>
  <a href="javascript:void(0);" class="elx_menu.icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "module.elx_menu") {
    x.className += " responsive";
  } else {
    x.className = "module.elx_menu";
  }
}
</script>

Css:
.elx_menu .icon {  display: none;}
.elx_menu {etc....}

@media only screen and (max-width:360px) {
.module .elx_menu {display: none;}
.module .elx_menu a.icon {
    float: right;
    display: block;}
.module.elx_menu.responsive {position: relative;}
.elx_menu. icon {
    position: absolute;
    right: 0;
    top: 0;
  }
.module.elx_menu.responsive {
    display: block; }
}

I don't know what else to do !
Any help

Christos

[nikos]

I can't follow your custom modifications to see what is going wrong, but looking at the tutorial example of w3schools, this works fine in mobile view (see attached images).

[armpouniotis]

Yes, this tutorial works perfect on simple html + css.

On Elxis CMS we have build-in modules and div classes. So we have to adapt this tutorial on elxis code.

It is totally different.

Christos

[webgift]

You can create your own css classes and feel free to adjust them till you get
the desired result. There is no a limitation of using the build-in CSS classes
only.

[armpouniotis]

Yes, I know I can create my own css classes
but this doesn't solve my issue about responsive menu in mobile view....

Thank you anyway !

Christos