Nav bar links and borders colors

Baku

I am trying to achieve the homepage language menus I have found here : tunguyenwedding.com .
Unfortunagely, I can not get the exact results.
My web site : www.vladimir.photography .
The CSS code currently implemented is :

.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
border: 2px solid #4c4c4c !important;
padding: 5px 20px 5px 20px !important;
margin-bottom: 0px !important;
}

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: #4c4c4c !important;
}

/* Transition the links so they fade in and out */
a {
-webkit-transition:color 0.5s ease-in;
-moz-transition:color 0.5s ease-in;
transition:color 0.5s ease-in;
}

What changes should I make to achieve the results similar to tunguyenwedding.com ?

1. What CSS code should I add to change the original color of the menu link ?
2. How should I change the CSS code get the border color change on mouse hover with the fade effect ?

Thanks

Hikin' Mike

Remove that code and use this:

/**
* Navigation Buttons
*****************************************************/  
.sm-user-ui .sm-page-widget-nav-toplink,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child {
    border: 2px solid #4c4c4c;
    padding: 5px 20px;
    margin-bottom: 0;   
    }

.sm-user-ui .sm-page-widget-nav-toplink a {
    color: #f00;
    }   


    /* Button Hovers */
    .sm-user-ui .sm-page-widget-nav-toplink:hover {
        background-color: #ccc;
        border-color: #333;
        }

    .sm-user-ui .sm-page-widget-nav-toplink a:hover {
        color: #000;
        }   


/* Transition the links so they fade in and out */
a,
.sm-user-ui .sm-page-widget-nav-toplink {
    -webkit-transition: all .5s ease-in;
       -moz-transition: all .5s ease-in;
            transition: all .5s ease-in;
    } 

Baku

Mike, you nailed it !
Thanks a lot !

Hikin' Mike

@Baku said:
Mike, you nailed it !

Thanks a lot !

I was going to look at your site again because it didn't do exactly what I thought. The hovers didn't work correctly. This works better.

/**
* Navigation Buttons
*****************************************************/  
.sm-user-ui .sm-page-widget-nav-toplink a, 
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child a {
    border: 2px solid #ffffff;
    margin-bottom: 0px;
    padding: 5px 20px;
    color: #ffffff;
    }

    /* Button Hovers */
    .sm-user-ui .sm-page-widget-nav-toplink a:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #333333;
        }

/* Transition the links so they fade in and out */      
a, .sm-user-ui .sm-page-widget-nav-toplink {
    transition: all 0.5s ease-in 0s;
    }

Before if you hovered on the border, it wouldn't click. Now it does.

Baku

Thank you very much Mike.
This code works with the border hover perfectly now.
However, the "עברית" button text doesn't change it's color when hovered. Strange...
Any ideas ?

Hikin' Mike

Sorry about that. Forgot to add the other :hover:

/* Button Hovers */
    .sm-user-ui .sm-page-widget-nav-toplink a:hover,
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child a:hover {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #333333;
        }  

Baku

Now it is perfect !
Thank you again Mike ! :)

avman

I am wondering if CSS code is available for the drop down or fly out buttons to match the previously mentioned CSS. Is it possible to round the corners?
http://www.tomdphotos.com (http://www.avman.smugmug.com) Thank you in advance
Tom

Hikin' Mike

@avman said:
I am wondering if CSS code is available for the drop down or fly out buttons to match the previously mentioned CSS. Is it possible to round the corners?
http://www.tomdphotos.com (http://www.avman.smugmug.com) Thank you in advance
Tom

Add border-radius: 5px; here:

xxxxxx menu link, .sm-page-widget-nav-toplink a *:link, .sm-page-widget-nav-toplink a:link {
    background-color: #336600 !important;
    border: 2px solid #fd5f00 !important;
    color: #ffff00 !important;
    padding: 5px !important;
    }

Also, this xxxxxx menu link is not a valid expression.