Can anyone please tell me how to make the ends of a Top Bar rounded without adding a border? I’ve customised my Top Bar a bit with Big White Duck’s ‘TBS Menus’ stack, but this one customisation eludes me. There must be some CSS I can use to do it?
I’m offering my client a range of possible menu styles… her preference is the one I’ve created using Top Bar but she insists on having the round ends. It’s the top menu on this page.
Any help will be very much appreciated.
Tim.
Thank you, Gary (@Ruyton) . So close and yet sadly so far! I’ve added the same Top Bar into the only other page that is not yet live - ‘Newsletter’. Both now have your CSS code included (obviously). You’ll see that if it’s the end page that is active - currently ‘Menu test’, the round cornering becomes square. I’ve tried removing the ‘TBS Menus’ stack but actually, it makes no difference to this issue - just to other styling.
@tav, @joeworkman ?
It will be that red background you have added to the Menu Test item almost certainly. Take that off and leave the top bar menu background the same as the rest of it and see what happens.
Playing around with the CSS, setting opacity to zero shows the round corner. The square Menu Test button is overwriting this.
If you have not got any dropdowns then you could just add overflow:hidden to the .top-bar-wrapper css above - that will prevent the background of the links escaping from the rounded wrapper.
A more flexible solution is to also add the rounding to the first and last menu item links (where the colour is).
.top-bar li:first-of-type a{
border-radius: 20px 0 0 20px
}
.top-bar li:last-of-type a{
border-radius: 0 20px 20px 0
}
Bear in mind that you should cancel these things for the mobile menu using a media query. Overflow hidden will prevent the mobile dropdown working and the rounded menu items would look horrid.
Thank you guys so much for your time and help - really… much appreciated! I think I’ve got this nailed now with the code below and you can see it if you choose on the ‘Newsletter’ and ‘Menu test’ pages here. Now just need to get rid of that nasty red colour 
.top-bar-wrapper {
border-radius: 30px;
}.top-bar-wrapper {
overflow: hidden
}@media screen and (max-width:640px){
.top-bar-wrapper {
text-align: center
}
}@media screen and (max-width:640px){
.top-bar li:first-of-type a{
border-radius: 30px 30px 30px 30px
}
}@media screen and (max-width:640px){
.top-bar li:last-of-type a{
border-radius: 0px 0px 30px 30px
}
}
Looks good Tim 
@TimLawson you don’t need both the overflow:hidden and the round corners on the link items. They both do the same job, it is just that the latter is not destructive if you had dropdowns. Tip 2 - you can put everything in one media query so use one or other of the following
@media screen and (min-width:640px){
.top-bar-wrapper {
border-radius: 30px;
overflow: hidden;
text-align: center;
}
}
OR
@media screen and (min-width:640px){
.top-bar-wrapper {
border-radius: 30px;
text-align: center;
}
.top-bar li:first-of-type a{
border-radius: 30px 0px 0px 30px
}
.top-bar li:last-of-type a{
border-radius: 0px 30px 30px 0px
}
}
P.S. The “nasty” red active colour is coming from the Style Active setting in TopBar
@tav That looks like a really handy and brilliant bit of custom CSS. I’ve built a Knowledge Base for things like this on my site here: https://www.templaterepo.com/knowledgebase/ The idea is it’ll be a resource for the community that people can search to discover all sorts of tricks and hacks.
With your permission, I’d like to add this one? I entirely understand if you’d rather not.
@TemplateRepo Of course - you can stick it wherever you like. Good luck with the knowledge base, I think it could become a very useful resource for people.
Thanks @tav
I’ve talked about such a repo for tips/hacks etc. since forever, so now I have the TR site I’m in a position to actually do it.
To anyone reading this: I’m looking for help to maintain it, which means gathering up the tips/hacks/ideas etc. from the forums or other places and putting them into the KB. One person has already volunteered so if anyone else can help, get in touch.
@TimLawson Do you mind if I grab a screenshot of the demo page you put up, to add to the tip in the KB?
@tav many thanks - as you’ll be aware, I’ve got some remaining queries about which we are emailing.
@TemplateRepo - please go right ahead - thanks for asking - and let me know if there’s more I can provide… both ends, with the red colour to show ‘active’ state, etc.
Had to test it and it worked great!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.