Custom Home Page Nav Tweak

psenior1

I'm trying to tweak my homepage nav bar but having no luck. I've configured it to be vertical (rather than horizontal like the rest of the site).

What I'm trying to do is change the size of the background behind each of the nav options so its just slightly larger, rather than have them all one uniform length. The CSS I'm currently using is -

.sm-page-widget-nav-toplink {
margin-bottom: 7px !important;
background: rgba(0, 0, 0, .5);
width: 108px;
padding: 4px 10px 4px 12px !important;
white-space: nowrap;
float:right;

I presume its something to do with the 'width' options but can't find how to make it follow the size of the text, 'auto' concertina's all the options up so they are no longer on a single line each...

Any help much appreciated!

Hikin' Mike

Remove what you have and use this:

.sm-user-ui .sm-page-widget-nav-toplink > a {
    background: rgba( 0, 0, 0, 0.5 );
    padding: 5px 10px;
    }

psenior1

Great stuff many thanks.

I do have one more question, on mobile view the 'menu' background stretches across the screen. What I'd like do is make it smaller without it aligning to the left (stay in the centre) , which it does with the code below, any ideas?

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header
{
border-radius: 10px;
width: 100px;
background: rgba( 0, 0, 0, 0.5) !important;
}

Thanks again

Hikin' Mike

Remove what you have and use this:

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
    background: none;
    }

.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-color-default .sm-page-widget-nav-menu-expand > a {
    background: rgba( 0, 0, 0, .5 );
    padding: 10px 20px;
    border-radius: 10px;
    }

psenior1

you're a star, thanks Mike