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

[Isaac Krombell]

Hello,

After talking to Tom via email and suggesting that he write on the forum. I would like to get the Orbital Themes orbital menu for mobile devices. I think it’s an incredible menu and it would be great to have it on GeneratePress.

I provide a demo where you can see the menu: https://demo.orbitalthemes.net/

This menu makes it easy to handle with just one hand through a web page and it seems very practical. And I wish I could incorporate it into my website.

Thanks in advance!!!

[Tom]

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!

[Isaac Krombell]

Hi,

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

[Tom]

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!

[Isaac Krombell]

OK thanks. E-mail send.

[Tom]

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 🙂

[Isaac Krombell]

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!!

[Tom]

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?

[Isaac Krombell]

It is sent by mail.

[Tom]

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!

[Isaac Krombell]

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;
   }
}

[Tom]

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?

[Isaac Krombell]

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

[Tom]

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

[Isaac Krombell]

Also install the GeneratePress Child

[Author]

Posts