Colour background menu for mobile with sub menus

txt2nite

Hello

You helped me before to create a colorful side menu on my smugmug website which is using the Osiris theme.

My smugmug site can be found at shop.tubemapper.com, and the different colours represent different metro train lines.

I added a submenu to my menu. It still works in the desktop view but no longer works in the mobile view. What do I have to change in the code that you previously provide below

/**

Changes Different Nav Background
and Adds Left Padding
***************************************************/
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item {
padding-left:5px;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(1) {
background:red;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:hover:nth-child(1),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover:nth-child(1) {
background:blue;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(2),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(2) {
background:yellow;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:nth-child(3),
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:nth-child(3) {
background:orange;
}

.sm-page-widget-nav .vertical .sm-page-widget-nav-toplink:hover,
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item:hover {
background:green;
}
Tagged

Hikin' Mike

Looks like you disabled the menu for mobile.

Unrelated, glad to see you're implementing the product page. I made some recent changes, including another page. You might want to download the latest version.

txt2nite

Hello I have reactivated the hamburger menu.

The website has two menus for the desktop, but only needs the one on the mobile site.

I turned off the unneeded mobile menu with this

@media screen and (max-width: 736px) {

.sm-page-widget-23403409 .sm-page-widget-content {

display: none;

}

}

The menu which is left is the same as the main menu on the left on the desktop site. What I need help with is how do I get the mobile menu to display the colour variations of the desktop version. If I remove the sub menus it works again

SIDENOTE ABOUT PRODUCTS PAGE:
Yeah this is a great feature I have to fine tune this page at the end , so wlll keep my eye on the updates. This is a great addition Mike thanks for your hard work

Hikin' Mike

Since I don't have a mobile, I resize my monitor. I didn't re-size it enough and didn't see the second navigation. Anyway, remove the code for your desktop mobile and use this code, but add this to your theme's custom CSS section. This code will work on both desktop and your second menu.

This worked using one of the web tools I use, but you might want to save a copy of the old code just in case.

/**
* Changes Different Nav Background and Adds Left Padding
**********************************************************/
.sm-page-widget-nav .sm-page-widget-nav-accordion .sm-accordion > .sm-accordion-item {padding-left:5px;}

.sm-accordion > .sm-accordion-item:nth-child(1) {background: #555;}

.sm-accordion > .sm-accordion-item:nth-child(2) {background: #000;}

.sm-accordion > .sm-accordion-item:nth-child(3) {background: #884e23;}

.sm-accordion > .sm-accordion-item:nth-child(4) {background: #dc231f;}

.sm-accordion > .sm-accordion-item:nth-child(5) {background: #ffce00;}

.sm-accordion > .sm-accordion-item:nth-child(6) {background: #007129;}

.sm-accordion > .sm-accordion-item:nth-child(7) {background: #00a4a6;}

.sm-accordion > .sm-accordion-item:nth-child(8) {background: #d699ae;}

.sm-accordion > .sm-accordion-item:nth-child(9) {background: #858f97;}

.sm-accordion > .sm-accordion-item:nth-child(10) {background: #79004d;}

.sm-accordion > .sm-accordion-item:nth-child(11) {background: #000;}

.sm-accordion > .sm-accordion-item:nth-child(12) {background: #0018a8;}

.sm-accordion > .sm-accordion-item:nth-child(13) {background: #e86a10;}

.sm-accordion > .sm-accordion-item:nth-child(14) {background: #009fe1;}

.sm-accordion > .sm-accordion-item:nth-child(15) {background: #0018a8;}

.sm-accordion > .sm-accordion-item:nth-child(16) {background: #76cfbd;}

.sm-accordion > .sm-accordion-item:nth-child(17) {background: #5f3e99;}

.sm-accordion > .sm-accordion-item:hover {background: green;}

.sm-user-ui .sm-accordion>.sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-accordion-item-action:active {color:#fff !important;}

txt2nite

Thanks Mike

The colours work so mostly here. However you can see two hamburgers on top of each other. Sounds a bit like a big mac, but an easier way to describe it is that you can see 4 horizontal lines instead of 3 and there arenot perfectly overlapping either.

Hikin' Mike

Looks like you need to hide one of your menus. I'm not sure what you're trying to do but you'll need to use one of these to hide:

@media screen and ( max-width: 736px ) { 

    /* Top Menu */
    .sm-page-widget-23403409 {display:none;}

    /* Left Menu */
    .sm-page-widget-23403518{display:none}

}

Remove one of those to display the menu.

txt2nite

Thanks Mike, I promise it will make sense in the end, ;-)

IGNORE BELOW YOUR FIX WORKED ON THIS PAGE AS WELL!

~~Can you do me a favour? Can you also identify the css code for the accordion menu on the gallery page here, I need to disable this for desktop. I cant seem to find the id for some reason.
thanks~~

Ignore this, your fix fixed my future problem