I would like to get the Orbital menu in GeneratePress (Mobile menu)

Hi there,

Should be quite easy, but we need to lay the foundation first.

1. Set up a mobile header: https://docs.generatepress.com/article/mobile-header/
2. Set up an off canvas menu on mobile: https://docs.generatepress.com/article/off-canvas-panel-overview/

Once you do that, can you link me to your site so I can provide the necessary CSS?

Thanks!

Hi,

I already made the steps that I commented. How can I send you the credentials to access the web?

If it's just a URL, you can edit your original post and add the URL in that website field.

If there are credentials, you can email them to us here: https://generatepress.com/contact

Just be sure to mention this topic.

Thanks!

OK thanks. E-mail send.

Give this CSS a shot:

@media (max-width: 768px) {
    button.menu-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #000;
        border-radius: 50%;
        z-index: 20;
    }
}

Let me know :)

I just put it and I put these lines:

@media (max-width: 768px) {
    button.menu-toggle {
     position: fixed;
     bottom: 30px;
     right: 30px;
     background: #ffffff;
		 color:#000;
     border-radius: 50%;
		 font-weight:900;
		 height:65px;
	   box-shadow: 0 4px 20px #000000;
     z-index: 20;
	 }	
   
}

- I wish I could put the thicker icon: "fas fa-bars".

- I have seen that the menu stays behind the cookie bar, how could I put the menu in front so that it is not covered?

- Would it be possible for the submenu to have an aspect of the Orbital themes?

Thank you very much for your help!!

1. Does your site have Font Awesome installed? If not, you'll need to install it. Then I'll be able to adjust the CSS to use that icon instead.

2. What if you change your CSS to this?:

@media (max-width: 768px) {
    button.menu-toggle {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: #ffffff;
        color: #000;
        border-radius: 50%;
        font-weight: 900;
        height: 65px;
        box-shadow: 0 4px 20px #000000;
        z-index: 999;
    }
}

3. I'm not seeing any sub-menus on the Orbital theme. Can you show me a screenshot maybe?

It is sent by mail.

Try this for the bars:

.menu-toggle:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c9";
}

Can you change the off canvas panel to "Slide" instead of overlay, and give the menu some sub-menu items?

Thanks!

Good,

I already have the menu in slide mode. I tried to add some code but I think I am missing or not what I put.

@media (max-width: 1040px) {
.slideout-navigation {
     width:200px !important;
     max-height:318px;
     border-radius:12px;
     margin-right: 1rem !important;
     overflow-y: hidden !important;
}

.slideout-navigation a {
     cursor:default;
}
	
.menu-item>ul>li a {
     cursor:pointer !important;
}
	
.menu-item>ul>li{
     padding-top:0.40rem;
     padding-bottom:0.40rem;
}
	
.main-nav a {
     border-bottom:1px solid #eee;
   }
}

Weird, the button isn't opening the slideout nav for me when I use developer tools to initiate the mobile width.

Did you make any other changes besides the CSS above?

I just removed. overflow-y: hidden; in the submenu that is trying one thing. It is the only thing I did.

Hmm, any other plugins added? Is the toggle working on mobile for you?

Also install the GeneratePress Child