Help with amending the spacing on the mobile phone menu

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.

If you browse to site with a phone, and expand the menu it also has a colouful drop down. (using the code below). What I want to know is how do I reduce the spacing between menu items and at the same time increase the padding around each menu item,and change the text colour to white. What I'm trying to achieve is a mobile menu like the one on the main wordpress website tubemapper.com,

Thanks and I hope I explained myself correctly

regards

And here is the code for the colorful menu

/**

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

Hikin' Mike

Add this to your theme's custom CSS section:

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .vertical .sm-page-widget-nav-toplink {
    margin-bottom: 0;
    padding: 20px 0;
}

The removes the bottom margin default from SmugMug and adds 20px padding top/bottom and zero left/right.

BTW, you link doesn't work.