Hamburger menu at the bottom 
Author: Claudiu Madalin P.
Visited 1151,
Followers 1,
Shared 0
Hello,
My website is mostly accessed on smartphones, and on smartphones with a rather large height, it becomes uncomfortable to access the buttons on the top of the hamburger menu with a single hand.
So, my question is: is there any way, a html code maybe, to make the buttons of the hamburger menu be displayed starting from the bottom, instead from the top?
I would like to add that I don't want to use workarounds, like arranging the pages the other way around on the site map, because the home page will start from the right, instead of the left on a computer.
I have also attached an image for a better understanding.
Thank you!
Posted on the
Hi Claudiu,
thank you for getting in touch.
If I correctly got what you mean, you would like the hamburger button to be displayed at the bottom of the website instead of on the header: to do this, you can simply add a Menu Object on Step 2 > Template Content > Footer.
Please let me know if I can be of any further help.
Author
No, that's not what I mean, I already know how to add the menu on the footer, that's simple. Check the screenshot. I want the elements within the hamburger menu to be displayed at the button. When you open a hamburger menu (doesn't matter where it's located), the pages are always displayed from top to bottom. I want them displayed from bottom to top. There is no option for this, so I would need a html code.
Author
Hello Claudiu:
Take a look at my website and I think that is what you require. Note: The order is relatively reverse, so it also depends on the order you have your pages in.
https://espaciosdeexpresion.com/
It is with Css code:
<style>
#imHeader_imMenuObject_07-menu-opened #imHeader_imMenuObject_07_container-menu-opened > ul {
display: flex;
flex-wrap:nowrap;
flex-direction: column-reverse;
align-content:normal;
justify-content: flex-start;
align-items:center;
}
</style>
You have to place it in STEP 1 - STATISTICS AND CODE - CODE - ANETS OF THE CLOSURE OF THE HEAD LABEL.
NOTE: Each menu object is assigned a number (in my case it is 07 and I have it fixed on the left side on all pages) you will have to change it to the one assigned to your menu object.
To identify it you will have to go to the preview and right-click and select INSPECT THE CODE.
1.- A window will open and you will select the upper left icon (see screenshot).
2.- Then you will click on the menu or hamburger menu.
3.- The name and number of the assigned menu will be displayed on the right side of the window.
In the css code you change it... I hope you only have to change the number otherwise you will have to parse and change to the full name assigned until before the {}
I hope I have explained it well. I'm about to leave for work and I'll be back in about 8 hours.
Greetings.
ANETS = BEFORE xD
Author
Thank you!!! I followed your steps, only difference is that I had to put the code in "After opening the head tag". And I changed "Header" to "Footer" (my menu is on the bottom) + "07" to "01" (after the "Object_"). I have 0 knowledge about html, css, or any code for that matter, and I've searched a lot for this on the internet. Thank you again!!!
Author
If there is not much to ask, can you also please tell me how you did the language selection thing?
Author
Nevermind, I tried it and the texts become too long in some languages, and the message boxes do not work. I'm marking your answer as correct, I really appreciate your help!
There is an object for that:
Author
I found it, apparently I had to install it first. But, as I said before, the texts are too long in some languages, they spill out of the buttons, and the box messages are not translated. My website is mostly with images anyway, so it's not a big deal. But thank you too!