Help with amending the spacing on the mobile phone menu

txt2nitetxt2nite LondonPosts: 39Registered Users Big grins

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

Comments

Sign In or Register to comment.