Elxis CMS Forum
Support => General => Topic started by: armpouniotis on July 03, 2020, 15:43:40
-
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
-
Read this article (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp) which explains how to create a responsive top navigation menu with CSS and JavaScript
-
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
-
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).
-
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
-
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.
-
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