Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, April 1, 2012

Centering Header Links in Blogger Dynamic Views

Before
After
Here's a quick one. When you start adding pages links to your header bar, they will be right-aligned by default. In this post, I'm going to show you how you can bring them to the center. Let's cut to the chase shall we?

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.
.tabs{
width: 80% !important;
text-align: center !important;
}
If the links aren't exactly centered, adjust the value 80% accordingly till they are centered. Since the Template Designer's live preview box is not working, you need to click on 'Apply to Blog' and see the changes on your actual blog. Using a high 'width' value could force your pages links to go into a drop-down mode.

All the best!

87 comments:

  1. Thanks again Yoboy, this worked perfectly for my blog. Now I'm just trying to figure out how to put my "Welcome" post as a permanent post at the top of the page with the rest of the post's following. Let me know if you have any suggestions.

    mrandmrsrobison.blogspot.com

    ReplyDelete
    Replies
    1. Hi Corey,

      Have you tried editing the post, and set its date to reflect some date far in the future? That way the post will always be 'sticky' at top.

      Delete
  2. Thanks a bunch Yog.

    Sorry for being a bit off topic, but any chance there is a way to make your header bar sticky? I don't want it to disappear when I scroll down. And getting rid of the header bar's under shadow would be nice too.

    ReplyDelete
    Replies
    1. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #header .header-drawer.sticky{
      margin-top: 0px !important;
      position: fixed !important;
      top: 65px !important;
      }
      #header .header-drawer, .ss{
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Delete
  3. Dude, I'm still amazed that your tuts ACTUALLY work. Well done and keep it up!

    ReplyDelete
  4. Hi mate my blog is http://www.game-modo.com. I have been having some issues with the dynamic views, if you press on About Modo you will notice that the Gadget menu is over the top of the scroll bar. How Can I fix this?

    ReplyDelete
    Replies
    1. Hi Richard,

      Looks like the gadgets overlap on the scrollbar by default in static pages. Here's what you can do. Edit your static pages - Switch to HTML mode (as opposed to compose mode) - Add the following HTML at the bottom of your page. Do this for all your static pages:

      <style>
      #gadget-dock {
      right: 17px;
      }
      </style>

      Cheers!

      Delete
  5. i'm sorry,, but on my blog can't
    can u tell me, how to fix it?

    ReplyDelete
  6. Replies
    1. Hi Laode,

      I don't see the code anywhere in your template. Could you leave the code on in your template and get back to me?

      Delete
  7. @Yoboy, i have a question, this is not related to this post but please answer me, as you inspired me. I have a blog stramaxon.blogspot.com, but now i want to buy a domain, but the question is will it effect my search rankings and Alexa ranks ? I have seen many blog's search rankings going down due to change of address. Hope you will reply.

    ReplyDelete
    Replies
    1. Hi Deepak,

      I'm not an expert on rankings, but based on my personal experience, yes you'd notice a slightly significant drop in the ranking - as it'll take a while for your pages to get re-indexed. But if you maintain your consistency, you can recover from it quickly. To answer your question, yes it will temporarily affect your ranking.

      Delete
  8. this didn't work for me...can you please help?! also...I'm wondering why when I click on one of the tabs, the font/color/alignment changes??

    Thanks!!!

    http://lindsaydaniellephotography.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Lindsay,

      1) You're nt using a Dynamic View template, whereas the tweak above is for Dynamic View templates only. In your case, add this to your CSS:

      #Label3 .widget-content ul{
      position: relative;
      left: 220px !important;
      }

      Adjust the value 220px accordingly, if necessary.

      2) To prevent that weird changes when you click on one of the tabs, add this to your CSS:

      .tabs-inner .widget li span {
      color: #000000;
      display: inline-block;
      font: 14px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;
      padding: 0.6em 1em;
      }

      Cheers :)

      Delete
    2. oh my goodness - THANK YOU!!! I've been going crazy trying to figure this out!! :D

      Delete
    3. No biggie :) Glad you got it sorted!

      Cheers :)

      Delete
  9. Is there any way to snap the tabs directly to the center? without the width % command?

    Thank you

    ReplyDelete
    Replies
    1. Hi Stephen,

      You could try this in your case.. It still has the width command but you don't have to adjust it:

      #header #pages{
      width: 100% !important;
      }

      #header #pages.tabs ul{
      width: 100% !important;
      text-align: center !important;
      }

      There is another way, which is to position your menu to a static location. But in Dynamic View, the width of your blog is not a fixed entity. Which means a centered position in your computer doesn't necessarily mean a centered position in your reader's computer.. So, yeah, you need to somehow make it dynamic with the 'width' command..

      Cheers :)

      Delete
    2. Guys I just wanna help with my own experience, the code below help me to centered my page very well after I read all the comment on this post and combine it with another post's comment. Thank you Yoga, you are the best!

      .tabs{
      width: 81%; !important;
      text-align: center !important;
      }

      #pages{
      margin-left: 10% !important;
      }

      Delete
  10. Thank you so much for the awkward selected font tip, that had been driving me insane! However now whenever on of the label headers are selected the separator lines get all wonky. :( Do you know how to remove them? Thank you so much! xoxo

    http://thechicconfessions.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Haley,

      This should fix it. Add it to your 'Add CSS' box:

      .tabs-inner .widget li span{
      border-left: 1px solid white !important;
      }

      Cheers :)

      Delete
  11. Will the same code work for centering in other that dynamic view template??

    ReplyDelete
    Replies
    1. Should work on all Dynamic View templates. The code for non-dynamic template varies, depending on the template used (there are like hundreds of non-dynamic templates out there, if not thousands.)

      Delete
  12. Not sure what I am doing but I can not get codes to work for me. Every trick I am trying from your site is not working correctly. I would like to be able to have some page tabs listed as blogger initially puts them (on the left hand side of the screen) and then I would like to move some to the right hand side of the screen. Can you take a look at peoniesandhoney.blogspot.com?

    I appreciate your help!

    ReplyDelete
  13. Hey Yoboy,

    I ve been tweaking my site karsouny.com
    and i cant seem to center the tabs. they re always coming a buit to the left. And if i go beyond 92% i just goes to the drop down mode.

    Any idea what i should do?

    Also, how do i remove the
    Posted by, date and comment box and labels?

    Thanks! :)

    ReplyDelete
    Replies
    1. Hi Karsouny,

      Are you using a small-screened device? Coz when i tried setting it to 100% in my 14-inch laptop, it appears fine. Here's a screenshot --> http://i.imgur.com/TzuW6.png

      In any case, set it to the highest number that it could go before reverting to a drop down menu, and get back to me with the code still in your blog. I'll see if there's an alternative to adjusting the left-margin.

      And this is how you remove your post footers:

      .article-footer, .comments{
      display: none !important;
      }

      Cheers :)

      Delete
    2. Hi guys!

      I have the same problem. I've tried on numerous resolutions, it's just a few pixels more to the left instead beeing centered as it should be. Can you help?

      Delete
    3. Hi Vlad,

      What's your blog's address?

      Delete
  14. Hi Yoga,

    I have a problem with my CSS code. Whatever I write into it, it is not saved. I push the 'Apply to blog' button, but nothing is changed. I tried it several times. And the other strange thing is that a few lines are added to the end of my CSS code, but I don't remember writing it. This is the additional text:

    #pages ul li a, .ss.menu-item{
    color: #e4e4ea !important;
    }

    I couldn't delete it because of the saving problem, and I don't even know if it is needed. Could you help with this, please? My blog is here: http://igyvarrok.blogspot.hu/

    Thanks!

    ReplyDelete
    Replies
    1. Hi Vegazus,

      There is a known bug lurking around the Template Designer, that isn't letting users to save their settings. Here's the discussion thread:

      https://productforums.google.com/forum/#!topic/blogger/S_uVwRQQrOY

      Some users have reported success with IE. Give it a try, and let me know how it goes.

      Cheers :)

      Delete
    2. Thank you for your quick answer! I wrote to that thread and hope that they can fix it soon. I will keep you informed.
      Thanks! :)

      Delete
    3. I could make it in Internet Explorer! :) Thank you for your help!! :)

      Delete
  15. Hi! I centered the page tabs but how to get rid of the separator line on the left (in front of the first tab "Blog"). It looks weird with it in the front. Thank you! Your tutorial are awesome!

    ReplyDelete
  16. Never mind regarding my earlier comment!

    ReplyDelete
  17. Hi Yoga!

    Thanks for all your great tutorials, you've helped me SO much! For this particular tutorial, I was wondering, I have 4 tabs, is it possible to keep the first three on the left and put the last one on the right?

    http://tinypic.com/r/dra0r6/6

    Those four ''follow'' buttons you see, they are in one tab, and I would like to move them to the right of the screen leaving the other tabs where they are.

    Hope you can help me! Thanks a bunch!

    ReplyDelete
    Replies
    1. Hi Anna,

      Here, use this code - wrote it for your blog:

      #pages, #pages ul{
      width: 100% !important;
      }
      #pages ul li{
      display: inline-block !important;
      }
      #pages ul li:last-child{
      position: relative !important;
      float: right !important;
      top: -34px !important;
      }

      Cheers :)

      Delete
  18. hello!
    I have a problem with the alignment. I had to tweak the code like this:
    .tabs{
    width: 65% !important;
    text-align: right !important;
    }
    , and it gets aligned to the center, but if I open the webpage in a smaller window the header links tend to align to the left.
    Is there a code to make the header links remain stick to the center?

    http://mateigheorghiu.blogspot.ro/

    Thank you again for your tutorials!

    George

    ReplyDelete
    Replies
    1. Hi there,

      Why not use this?

      .tabs{
      width: 100% !important;
      text-align: center !important;
      }

      Delete
    2. I tried this before, and the result is that it makes all my links dissapear in the left margin under "Pages":

      http://mateigheorghiu.blogspot.ro/

      I tried before to change the width - exactly as it was in this tutorial, to 80%, but it makes the bar to be aligned on the center but to the left.
      This is how I ended up with:
      .tabs{
      width: 65% !important;
      text-align: right !important;
      }
      it was the only possible solution to make the bar stay in the center - but still, when I open the page in a smaller window, it makes the bar align to the left.
      I don't know why this isn't working for me - all of your other tutorials worked perfectly (and I thank you a lot for your tutorials - worked miracles!).
      that's why I ask if there can be a code (other than this) that can stick the bar to the middle of the page.

      Thanks you again for your reply,
      George

      Delete
    3. Hi George,

      The new code that you're using will align your links towards the left. The original code should work fine. Could you send me a screenshot of what you were seeing with the original code in place?

      Delete
  19. Hi Yoga, I'm new to blogs and stuff.
    And I'm having a problem while centering the links on the header bar (dynamic views).

    When I apply this code of yours, it works, the pages are centered, but, the links stop working. They are displayed as text and lose their "button" instance.

    Any thoughts on this?
    Thanks in advance

    PS. The same happened with the Logo on the header. Everything is displayed the right way, but they lose their "button" ability.

    ReplyDelete
    Replies
    1. Hi Rui,

      Let's have a look at your blog. What's your blog's address?

      Delete
    2. http://onenightshift4.blogspot.pt/

      Delete
    3. The links are blocked because you've added padding to your header bar, making the layers to appear on top of your links. In your code, change this:

      #header-container #header.header .header-bar span.title{
      background: url(http://imageshack.us/a/img40/6137/lunapic1363220302940472.png)
      no-repeat;
      margin-top: 45px !important;
      margin-left: 250px !important;
      margin-right: auto !important;
      height: 165px;
      }

      to this:

      #header-container #header.header .header-bar span.title{
      background: url(http://imageshack.us/a/img40/6137/lunapic1363220302940472.png)
      no-repeat;
      margin-top: 45px !important;
      margin-left: 250px !important;
      margin-right: auto !important;
      height: 120px;
      }

      Delete
    4. Thanks a lot, that was it :)

      About the logo, is there any way to make it "clickable" too? To make it work as a button like on the regular templates?

      Thanks again.

      Delete
    5. If you're looking for a clickable header, I'd usually point my readers to this tutorial of mine: http://www.southernspeakers.net/2012/06/use-entire-header-as-home-button-in.html

      But in your case, since you've manually added left and top margin to your header to incorporate the abstract background, the clickable area in your header will be limited, unless if you could get rid of the extra margins.

      Cheers..

      Delete
  20. i have searched far and wide and tried every tutorial for centering the damn tabs and it's still not working! any way you could help me out? devinandkatieashby.blogspot.com

    ReplyDelete
    Replies
    1. Hi Devin,

      Here, this should do the trick. Add it to your CSS:

      #PageList1 ul{
      width: 640px !important;
      margin: auto !important;
      display: block !important;
      }

      Cheers :)

      Delete
    2. aw man, thank you so much! unfortunately, it didn't work :( am i just totally out of luck?! i mean, what the heck?! haha css is soooo complicated for me :( thank you for trying though!

      Delete
    3. The code isn't faulty, but your other code is. There seems to be some crazy amount of repetitive lines in your CSS. It looks off. Did you put them there?

      Delete
    4. hmmm. i don't think so?! at least no on purpose... haha!

      Delete
    5. I don't think so?! I haven't touched my CSS much, and have only put in a few codes to make some adjustments... but it's very possible I could have messed it up seeing as how I don't really know what i'm doing... haha

      Delete
    6. I guess you have some cleanup to do then. If you keep piling up codes in your Add CSS section now, things are just gonna get worse, and at one point, you'll decide it's beyond recovery and you'd want to start over from scratch. Let's not go there.

      Delete
  21. This doesn't work for me for some reason, could you help me out? http://citysphere.blogspot.co.uk/
    all your other tutorials have been great

    ReplyDelete
    Replies
    1. Hi Victoria,

      You aren't using a DV template, whereas the tutorial above is for DV templates alone - which is why it wasn't working in your blog. To center the links in your template, use this:

      .tabs ul{
      width: 42% !important;
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Cheers..

      Delete
  22. Hi Yoboy, firstly, thanks for all the super advice on this blog, you've really helped me transition to dynamic views and be happy!

    I am using timeslide, and I have applied the change to centre the header links, but they aren't actually centered... Is there anything I can do?

    www.onefortydeep.com

    Thank you.

    ReplyDelete
    Replies
    1. Hi Andy,

      I couldn't find the code in the tutorial above anywhere in your page. Can you check again?

      Delete
    2. Hi Yoboy, thanks for the reply and sorry not checking back sooner! I removed the code and left them as they were in the end.

      Thanks though, i get so much value from this site :)

      Delete
  23. I have an OLD template ,I was wondering how to center the culumns, the main one and side bar is over to the left?

    ReplyDelete
    Replies
    1. Hello there,

      Did you mean you want to bring your right sidebar to the left? If that's the case, the Template Designer will still work for you (Awesome Inc template is still relatively new). Head over Dashboard - Template - Customize - Layout - Select a desired layout.

      Delete
  24. See with the OLD template I have I can not do that. it shows this when I try
    Body layout
    Not applicable for this template.
    Footer layout
    Not applicable for this template.

    ReplyDelete
    Replies
    1. Perhaps I've been looking at the wrong link. What's your blog's address?

      Delete
  25. Hi Yoga!
    Great blog. I went ahead and added a logo along with the styles. But now I'm having issues with the other pages now have a large gap between the content and nav bar. Take a look: http://www.photosbypurciel.com/

    Any ideas?
    Thanks!

    ReplyDelete
    Replies
    1. Hi Matt,

      Are you still seeing the gap? I can't quite find it in your blog. You've probably gotten it sorted. If that is not the case, could you share the link to the page in which you're seeing the gap?

      Delete
  26. Hi Yoga! Thanks for all of your tutorials, they're all so helpful and most have worked instantly. This one is driving me nuts though. I've tried using other variations from the comments , changing the percent, even using some other positioning things I sort of know like trying to get it to float center. No matter what it will look great in Chrome for me but be very off in Firefox and Sarafi. Any chance you can help? My site is www.internlikearockstar.com. Thanks so much! You're awesome!

    ReplyDelete
    Replies
    1. Hi Katie.. I'm seeing pretty much the same thing in both Chrome and Firefox. Have you tried refreshing your browsers' cache/cookies?

      Chrome: http://i.imgur.com/WxmJlWP.png
      FF: http://i.imgur.com/Jlg0qm8.png

      Delete
  27. Hi Yoga, thanks a lot for your site and your many counsels. There is a problem that I can't find an answer to. On a blog that I'm making with 13 years-old pupils, http://lemetierdewebdesigner.blogspot.fr/ , the pages in the horizontal bar don't all appear. Is there something I can do about it? Could this menu be on two lines so that all the pages could be seen?

    Thanks a lot!

    ReplyDelete
    Replies
    1. Probably yes but the result wont be as pretty (in terms of cosmetics). Just for the records, I can see all your tab menus. That said, please advise where is the cutoff point (the last link that you can see on your screen) so that I can estimate accordingly.

      Delete
    2. Hi Yoga,
      thanks a lot for your answer. As I couldn't found the solution, I just changed the siez of the font, so that fixes the problem... The problem is still there only if you reduce the size of the Firefox Windows... The cutoff point depends on how much you reduce the window...

      Delete
    3. Hi Drouet,

      I notice you're using a Dynamic template. I must have mislooked your template in the past. It's very tricky to go for a double-lined bar with a Dynamic Template, unfortunately.

      Delete
  28. Hi Yoga,

    You have a great tutorial here.
    Ok, anyway, I was trying to apply this on my blog but it just won't work. :(
    my blog address is: http://www.feedyourtummy.com

    Another thing, I also applied from one of your tutorial as well on how to hide the side bar on one of my pages and it worked just fine. But my problem is, I want to center the 'contact page" after i hid the side bar. I can't find any codes how to center just this specific page though.
    the url for this one is: http://www.feedyourtummy.com/p/contact-me.html

    Hope you could help me out.
    Thanks a lot in advance!!

    ReplyDelete
    Replies
    1. Hi Len,

      The tutorial above is for Dynamic View templates, you're not using a dynamic template. That said, for your blog, I wish I could share an automatic way to center your title, but this needs to be manually adjusted. Here's the code to start you of. Adjust the value in the code below:

      #PageList9{
      margin-left: 100px !important;
      }

      As for centering you contact page, changes would have to be done to the original code. Mind sharing it here so that I can amend it?

      Delete
    2. Hi Yoga,

      Thank you so much! It worked. :)

      oh and for the contact page, I'm really very familiar with codes so I don't know if this is the code you were asking:



      #sidebar-wrapper{
      display: none;
      }
      #content, .single{
      width: 100% !important;
      }

      Once again, thank you!

      Delete
    3. Hi Len,

      Is this the code that was added to the HTML section of your blog (to get rid of the sidebar for this particular page)? I imagine you won't get to post HTMLs in comment section, so perhaps you'd want to paste it http://pastebin.com/ or something and get back to me with its link.

      Delete
  29. Thank you Yoga!
    Since Google made some changes in the menu options, i can't change my links!
    I have a link going to the wrong URL.
    I need the link "shop" to go to bymismas.com.

    Can you help me?
    http://mismasblog.com/

    Best Silja

    ReplyDelete
    Replies
    1. Hi Silja,

      Try going to Dashboard - Layout - Pages - Edit - Click on the 'X' for the wrong link - then add a new one by clicking on '+ Add link page'.

      Delete
  30. All of your suggestions have been great! I can't seem to get my header links centered, though. The highest it will let me adjust the percentage is 96% before it reverts back to a pages dropdown menu on the left. Therefore, all of my links are just a little left of center under the header image instead of right in the middle. Any suggestions for how to fix this?

    ReplyDelete
    Replies
    1. Hi Megan,

      This should let you to manually adjust the position of the links. Just play with the value 10 below:

      #pages{
      position: relative;
      left: 10px !important;
      }

      Delete
    2. That worked! Thank you so much!! I am so grateful you are willing to share your knowledge!

      Delete
  31. Hi, Yoga!

    I frequent your page and appreciate all of the great tutorials! I was wondering if you'd be able to help me. I just deleted my pages widget on blogger in order to implement a custom navigation bar complete with sub menus but now my tabs WILL NOT CENTER. I've must have tried a million codes. The nav bar itself is centered. Just not the tabs. Any suggestions?

    www.ginachristiansenphotography.com

    ReplyDelete
    Replies
    1. Hello Gina,

      Sorry for my ridiculously late reply. I see your tabs are already centered (or I must have been looking at the wrong place). Have you gotten this sorted?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.