Mobile Menu in four corners of screen

[Mariannep]

Hello !
I am currently working on a website where the 4 big "categories" are accessible through 4 buttons on the corners of the browser page :

http://gautyqi.cluster030.hosting.ovh.net/

In the mobile version, I would like to keep these buttons in the four corners - and not have them in a hamburger menu.

In Customize > Mobile > Mobile Menu, I selected the "Desktop menu style" to have the four buttons visible.

My problem is that I dont know how to position these elements to have them stay each in their corner. Right now, as you can see, I have managed to put them in the general area where they should be by "pushing them" around with margins... but it's not really working.

I looked at leberg.com because they have the exact menu that I'm trying to make. It seems that they put the top buttons in a div called "navbar-mobile-top" and the bottom buttons in a div called "navbar-mobile-bottom". I wanted to try that, but I'm not sure how to implement these HTML elements in the code.

Did anyone stumble upon the same question? What would be the best way to do this? Would it be possible to maybe... delete the menu specifications in the mobile CSS to have the desktop menu by default?

Thanks in advance !
Marianne

[Mariannep]

@Mariannep Nevermind, I found the solution !

I only needed the following CSS :

/* POSITION MENU 4 CORNERS*/

/* PROJET*/
#menu-item-41 {
position: fixed;
top: 10px;
right: 10px;

}

/A PROPOS/
#menu-item-40 {
position: fixed;
top: 10px;
left: 10px;

}

/CONTACT/
#menu-item-52 {
position: fixed;
bottom: 10px;
right: 10px;
}

/INSPIRATION/
#menu-item-176 {
position: fixed;
bottom: 10px;
left: 10px;

}

I dont know how I didnt find this solution earlier.

[Richard]

Dear @Mariannep

Thanks for posting this update! :)

Best
Richard

[oo]

This solution isn’t working anymore, I guess. Are there any suggestions to implement Le Berg style 4 menu items fixed on the corners?

[Richard]

Dear @oo

You are using this Custom CSS suggestion from @Mariannep?
If you post a link to your website i can check for a simple fix, the above code should work. But the menu-item # (number) will be different for each website.

---

Best

Richard