Adding Separators (Vertical Lines) Between Pages Links in Blogger Dynamic View | Southern Speakers v3.0
The header bar in a Dynamic View template could accommodate several horizontal Pages links as well as external links (before resorting to a drop-down menu when the number of links increases). A couple of users have been wondering if a separator line could be placed in between the links. The answer is yes, and that's what this tutorial is going to be about.
Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
Extras
1) To remove the left-most vertical line (to the left of your first link), add the following additional code to your 'Add CSS' box:
2) To add an extra vertical line to the right of your last link, add the following additional code to your 'Add CSS' box:
 |
| Before |
 |
| After |
The header bar in a Dynamic View template could accommodate several horizontal Pages links as well as external links (before resorting to a drop-down menu when the number of links increases). A couple of users have been wondering if a separator line could be placed in between the links. The answer is yes, and that's what this tutorial is going to be about.
Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
1 2 3 4 5 6 7 8 9 | #header #pages:before{border-left: 0px !important;}#header .tabs li, .ss{margin-left:0px !important;padding-left: 10px !important;padding-right: 5px !important;border-left: 1px solid white;} |
Extras
1) To remove the left-most vertical line (to the left of your first link), add the following additional code to your 'Add CSS' box:
1 2 3 | #header .tabs li:first-child{border-left: 0px !important;} |
2) To add an extra vertical line to the right of your last link, add the following additional code to your 'Add CSS' box:
1 2 3 4 | #header .tabs li:last-child{padding-right:10px !important;border-right: 1px solid white;} |
