Thursday, December 26, 2013

Removing Border Around Page Tabs/Navigation Bar

If you want to remove the box around your tabs in your horizontal navigation bar, go to Design>Layout>Customize>Advanced. Scroll down to Add CSS.

In the CSS box, copy and add this:

.tabs-cap-top, .tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList
.widget-content {border:none !important; background: none !important;
-moz-box-shadow:none
!important;  -webkit-box-shadow:none !important; box-shadow:none
!important;}.tabs-inner .section {border:none !important;}

You can hit the space bar to see if your changes are correct. Then if it is, Save. 

That's it!

15 comments:

  1. Thank you so much, I've been trying to do this for ages! I even managed to change the CSS code slightly and make the border around my posts transparent which I have also been trying - and failing - to do as well! I'm impressed with myself as I am definitely not tech-savvy!

    Holly | .hollylabeau.blogspot.com

    ReplyDelete
  2. Thank you for this! I was really happy with the way my blog looked apart from that darn box around my page links and now thanks to you it's gone!

    ReplyDelete
  3. OMG thank you SOO much for this!I've been looking for this for ages!

    ReplyDelete
  4. i added this code to the CSS and nothing happened, sigh :/

    ReplyDelete
  5. Unfortunately, blogger no longer has the tabs border listed under advanced in the customized template... :p(

    ReplyDelete
  6. Hi thanks for this! I still have the inner lines between my tabs I was wondering how to remove them.

    ReplyDelete
  7. THANK YOU SO MUCH. I seriously was getting so angry because I couldn't figure it out.

    ReplyDelete
  8. A thousand thanks. I tried everything, even other CSS codes and this is the only one that worked for me. :)

    ReplyDelete
  9. Wow...great tutorial. I've been searching for this code a long time ago. Thanks

    ReplyDelete
  10. Ah thank you so much for this info! x

    ReplyDelete