Home>Support>How to create a sub item mobile menu

How to create a sub item mobile menu

By Sebastian, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hei!

1) I need help with all the steps to create a sub item mobile menu.

2) how is it possible to make the outer frame of the mobile menu transparent?
..so that the inner frame with the menu items float on the top of the specific site.

thanks for your help.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    Hi Sebastian

    1. The mobile menu mirrors the main menu. So if you have sub menu items in the main menu you will in the mobile menu too. There unfortunately isn’t a separate mobile menu.

    2. Insert the following under Appearance > Custom CSS:

    /* Mobile Nav - Set Background Opacity */
.mobile-nav-frame {
	background: rgba(34,34,34,0.5) !important;
}

    0.5 = 50%. Adjust as required.

  2. 9 years, 9 months ago Sebastian

    Hei Andrew. Thanks for your support!

    2. is solved with the Custom CSS above.

    1. Good to know that the mobile menu should mirror the main menu.
    However, the sub menu items does not unveil while i’m hovering over the specific menu item in the mobile menu
    – as it is the case in the main menu. How can i solve this issue?

  3. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    The current mobile menu uses a right arrow to indicate where a sub-menu is present. Clicking on that reveals a new list with the sub pages.

    You could also consider listing sub pages on the parent page in case users click that before navigating further in the mobile menu.

  4. 9 years, 9 months ago Sebastian

    Hei Andrew,

    there is really no right arrow to indicate where a sub-menu is present.
    please check : minmassasje.com

  5. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    It’s there on the right. It’s a white arrow though so it unfortunately can’t be seen with the mobile menu changed to white.

  6. 9 years, 9 months ago Sebastian

    Hei Andrew,

    I see what you mean! My Questions for you :

    1) How is it possible to change the color of the arrows
    that indicates the sub menu items on a white background?
    – any CSS codes?

    2) How is it possible to disable the menu icons (that are touched to the menu items like „Massasje“) for the mobile menu only?

    3) How is it possible to let the mobile menu mirror the hovering effect (color change effect) form the main menu?

    Thanks for you effort and knowledge.

    Sebastian Norway

  7. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    1. The menu arrows are unfortunately images, not backgrounds that we can easily change. My recommendation would be to revert to a darker menu and use the opacity setting previously discussed to tone it down.

    2. Unfortunately not, no.

    3. Users on touch devices won’t see a hover effect, only when a link is touched would a virtual hover be created. Below is a full set of selectors to help edit the mobile menu styling with:

    /* Mobile Nav */

.mobile-nav-frame {
background: rgba(34,34,34,0.5) !important;
}

.mobile-nav-frame .title h3 {
color: white !important;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.8) !important;
}

.mobile-nav-frame ul {
background: #212121 !important;
border: 1px solid #111 !important;
}

.mobile-nav-frame ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.mobile-nav-frame ul li a.link {
color: #F3F3F3 !important;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7) !important;
}

    At this stage, this is unfortunately the limit of what we can assist with.

    For further customisations you could perhaps consider a third-party mobile menu. Perhaps something like: https://wordpress.org/plugins/wptouch/.

  8. 9 years, 9 months ago Sebastian

    Thanks for your patience and expertise Andrew!

    I wish you the best.

  9. 9 years, 9 months ago Andrew Misplon
    Hi, I Work Here

    For sure. You too. Thanks for your understanding.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More