MyBB Community Forums

How would I go about creating a top link separator like this:


The furthest I have gotten was here:


How do I get the border/separator to expand the whole height? I've tried a few different things but they don't expand. Here is my code:

#logo ul.top_links {
 background: #ff8a00 url(images/cleanorange/thead.png) repeat-x;
color: #ecebeb;
padding: 7px;
clear: both;
font-weight: bold;
text-align: left;
margin: 20px 5px 0 0;
}

#logo ul.top_links a{
color: #ecebeb;
display: block;
padding-right: 15px;
border-right: 1px solid #ccc;
}

Thanks.

css edits are always easy/faster to fix if provided with the url..

(2016-02-23, 06:04 AM)mmadhankumar Wrote: [ -> ]css edits are always easy/faster to fix if provided with the url..

Here is my test board URL: http://destinyboard.net/

in global.css of your theme remove "padding: 7px;" for "#logo ul.top_links" and then change "line-height: 16px;" into "line-height: 32px;" for "#header ul.menu li a".. save the changes and hard refresh the forum (Ctrl+F5) to see the changes...

(2016-02-23, 06:18 PM)mmadhankumar Wrote: [ -> ]in global.css of your theme remove "padding: 7px;" for "#logo ul.top_links" and then change "line-height: 16px;" into "line-height: 32px;" for "#header ul.menu li a".. save the changes and hard refresh the forum (Ctrl+F5) to see the changes...

Thank you very much. That did it!

Now just one more thing. Since the edit, how do I even out the spacing here? As you can see, the left side of 'Home' is much smaller than the rest. I'd like to have both right and left sides even.

add this to global.css to fix that...

#logo ul.top_links li:first-child {
    padding-left: 11px;
}

(2016-02-24, 08:25 AM)mmadhankumar Wrote: [ -> ]add this to global.css to fix that...

#logo ul.top_links li:first-child {
    padding-left: 11px;
}

Thank you very much for all of your help!