Jupiter-X: Issues with Main Navigation Menu


#1

Trying to move an existing site into Jupter-X, which I’ve never used before, having some issues related to the top nav menu.

Issue 1: When I view this on a desktop computer, the menu looks great. When I view it on a smart phone (android), the menu doesn’t show up at all. Why?

Issue 2: When I look at this homepage on a smaller screen, the menu disappears and the three lines which symbolizes “expand menu” does not appear either! It almost seems as though Jupiter-X is not responsive? Is that possible?

Issue 3: How can I set the menu to wrap into two rows, vertically centered in the upper menu container?

Here’s our staging server: http://rmj.c06.myftpupload.com/

Thank you!


#2

1- and 2- This is because the menu on mobile switches to burger menu for obvious reasons. The burger icon on the mobile is black which is mixing with the background black color. It is present there exactly on the right of the cart icon. Please change the color of the burger icon and it will be fine.

3 - Well, you have a lot of menu items there. Are you using the default header template or have you created a custom template for the header?

It’s not possible in the default header.
In the custom header, you can add 2 rows and add specific menu items in each row thus showing half menu items in upper row and the rest in lower row.


#3

Can you tell me where do I change the color of the burger menu?

Also, on the third topic, after I change to custom header, where do I add the 2 rows and then add specific menu items?

thanks for your help!


#4
  1. For now there seems to be only one option which is to add a background color to the burger icon.
    Please add the below CSS to Customizer -> Additional CSS

    .navbar-dark .navbar-toggler{
        background-color: #fff;
    }

#5
  1. You basically have to create a custom header template using the Elementor. Go to Elementor -> Templates and create a new template for the header.
    Then, create 2 different menus in Appearance -> Menus.
    Now, use the navigation menu element that comes with raven in Elementor and add it twice in 2 rows.
    Set different menus for each row.

Here is an article to create a custom header in Jupiter X https://help.artbees.net/header/creating-a-custom-header-in-jupiter-x-using-elementor