Blogger’s Template Designer is a great resource for editing your
blogs design and the addition of custom fonts is a welcome one. But it
does have its limitations. So today I’ll be showing you how to customise
your navigation menu using the add CSS function that is available in
the template designer.
By default Blogger adds a border to the whole navigation menu and
grey background to the active link. So i’ll be sharing some code that
will enable you to remove the borders and background among other things.
Remove All Borders
.tabs-inner .section:first-child ul {
border-left: 0 solid #DDDDDD;
border-right: 0 solid #DDDDDD;
border-top: 0 solid #DDDDDD;
margin-top: -1px;
}.tabs-inner .widget ul {
background: none repeat-x scroll 0 -800px transparent;
border-bottom: 0 solid #DDDDDD;
margin-left: -30px;
margin-right: -30px;
margin-top: 0;
}.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: #EEEEEE;
color: #000000;
text-decoration: none;
}.tabs-inner .widget li:first-child a {
border-left: medium none;
}.tabs-inner .widget li a {
border-left: 0 solid #FFFFFF;
border-right: 0 solid #DDDDDD;
color: #000000;
display: inline-block;
font: 12px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif;
padding: 0.6em 1em;
}
Remove Grey Background on Active Link
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: transparent;
color: #000000;
text-decoration: none;
}
Add Background Colour to Whole Navigation Menu
.tabs-inner .section:first-child ul {
background: none repeat scroll 0 0 #DDDDDD;
margin-top: -1px;
}
Change #DDDDDD to the colour code of your choice. #FFFFFF = white, #000000 = black, #DDDDDD = Light Grey, #999999 = Dark Grey.
Add Solid Border to Navigation Menu
.tabs-inner .section:first-child ul {
background: none repeat scroll 0 0 #DDDDDD;
border: 2px solid #999999;
margin-top: -1px;
}
This code will add a dark grey border to your navigation menu. Like
before just change #999999 to the colour code of your choice. To add a
dotted or dashed border replace ‘solid’ with ‘dotted’ or ‘dashed’.
Separate Tabs and Add Background Colour
.tabs-inner .widget li a {background: none repeat scroll 0 0 #DDDDDD;border-left: 0 solid #FFFFFF;border-right: 0 solid #DDDDDD;color: #000000;display: inline-block;font: 12px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif;padding: 0.6em 1em;}.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: #DDDDDD;
color: #000000;
margin-right: 20px;
text-decoration: none;
}
To Move Nav Menu to the Right
.tabs-inner .section:first-child ul {background: none repeat scroll 0 0 #FFFFFF;border-left: 0 solid #DDDDDD;border-right: 0 solid #DDDDDD;border-top: 0 solid #DDDDDD;margin-left: 100px;margin-top: -1px;}
amount to move the menu further to the right and lessen the amount for
the opposite effect.
your menu. But if you need to know anything particular just let me know
in the comments!
source : http://girldoesgeek.com/2012/05/how-to-customise-the-top-tabbed-nav-menu-on-blogger.html
