Southern Listeners

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

Sunday, April 8, 2012

Sticky Header Bar in Blogger Dynamic Views

Before
After
Here's another quick one. When you start to scroll in Blogger's Dynamic View, your header bar will automatically hide itself and will only re-appear when you point to it. Here's how you can force it to stay visible all the time.

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.
#header .header-drawer.sticky{
margin-top: 0px !important;
position: fixed !important;
top: 65px !important;
-moz-transition: top 0.0s linear 0.0s !important;
-webkit-transition: top 0.0s linear 0.0s !important;
-ms-transition: top 0.0s linear 0.0s !important;
-o-transition: top 0.0s linear 0.0s !important;
}
If you've added a custom header from my 'Dynamic Views Header' tutorial, you need to adjust Line 4 from the code above to fit with the height of your header. You can find this value by tracking back the code for your custom header, and look for the last value in the code (next to the 'height' attribute).

Happy Easter everyone :)

165 comments:

  1. Great tip Yoga! Thanks much! Happy Easter!

    ReplyDelete
    Replies
    1. Happy Easter to you too Bob :)

      Delete
    2. Not sure what happened but I had to remove because the menu bar was covering the topmost part of the post when I scrolled down to read. Any way to keep this in and keep the top of the post section static? Of course I could have messed something up. :)

      Thanks Yoboy!

      Delete
    3. Hi Bob,

      I can't quite picture it. Do you have a screenshot of something? Just to clarify things, when this tweak on, the menu bar will always be visible.

      Delete
    4. If you look at http://xaahuyaxeed.blogspot.com/ you will see that the black bar is not always visible. When the post area is scrolled it first disappears then reappears. When it reappears it covers the text of the post area.

      If it were possible to make the post to scroll no higher than it's original placement (below the black bar) then the black bar would never be on top of the post and would not temporarily disappear. Also the background would always be visible between the black bar and the post area.

      Not sure if that makes sense. Thanks for helping!

      Delete
    5. I've added extra bits to the code above to force the menu bar to always appear with requiring a scroll. What do you think?

      Delete
    6. That seems to do it Yoboy! The post window still scrolls higher than I would like it to but the menu bar stays in place. Thanks for your help! Have a great weekend!

      Delete
  2. Happy Easter to you too sweetheart :)
    XoXo

    ReplyDelete
  3. Thanks for all your tips. I got the header in fixed position. Now, how would I go about doing the same for the sidebar? And since I already have the code in place for the header, do I just add the new codes below it with a blank line in between and add another blank line under the new codes?

    Sorry, I'm a total noob at this and will stay that way if I can help it, or rather if you can help me.

    Thanks.

    ReplyDelete
    Replies
    1. Hi tomcha,

      Yes you just need to leave a blank line and add additional CSS code. But I'm not quite getting your question regarding the sidebar. Are you trying to do something to your sidebar in Blogger Dynamic Sidebar Views?

      Delete
    2. Thanks for the reply. I'm new to these things so I guess I didn't express what I had in mind very well. Sorry.

      What I was hoping to be able to do was to make the sidebar "sticky" like the header so that it's always showing instead of hiding unless a mouse goes over it. Don't know if that makes sense.

      Delete
    3. I think I got what you mean. I think by sidebar you were referring to your gadget docks. If this is the case, use this css:

      #gadget-dock{
      position: fixed !important;
      right: 0px !important;
      }

      Cheers! :)

      Delete
  4. And while I am at it, is there a way to keep that little bar at the top of the blog with the blogger logo, next blog link, etc...? I miss having that as I'm accustomed to clicking on the logo to get back to my dashboard.

    Thanks again.

    ReplyDelete
    Replies
    1. Well, you're referring to the Navbar. There isn't any easy way to bring it back. And even if you managed to bring it back for ur site, the moment you click on 'Next', it's gonna disappear as other dynamic view blogs do not have Navbar by default. Bummer, I know.

      Delete
  5. Great great tips! Thanks!

    ReplyDelete
  6. hi yoga,

    i never comment on blogs but i really need to say thanks, i couldnt have made the switch to dynamic views without your help. i must have used 20 of the tutorials and tricks you have on your site. soo grateful. you know it all!

    i just have one more question. the blog is all set and working fine, but when i try to post the link to it on facebook, facebook doesnt pull a preview from the site to show a thumbnail or text preview. i see other blogs using dynamic views that are able to generate a fbook preview, so it must be possible and just something i have wrong in my template. any ideas??? this is my site http://blog.theupliftingproject.org/

    thanks soo much for all youve already helped with!

    ReplyDelete
    Replies
    1. Hi veeboo,

      Thanks for your nice comment :) About facebook, I'm afraid I couldnt be much of a help. Believe it or not, I don't even have a FB account. However, I have noticed complaints about this in Blogger Help Forum before. That means you're not the only one affected. The current consensus in Blogger Help Forum is that Facebook changed something on their site, since Blogger did not make any noticable change in their blog feed. You might want to try contacting Facebook's support team.

      Delete
    2. veeboo - Try surrounding your new post with paragraph html tags. Sometimes that works for me but FB does not seem to have much consistency in this area.

      Delete
    3. hey kansas bob, thanks so much for the tip. i tried it but it didnt work :(

      here is an example of a dynamic views blog that DOES generate a facebook preview-
      http://phylogenomics.blogspot.com

      while mine ( http://blog.theupliftingproject.org/ ) doesnt.

      hoping maybe someone can spot a difference in their coding/setup and mine that is making the difference.

      ive never ever had a problem with facebook giving a thumbnail/text preview of my blog until the second i switched to the dynamic views template, so i know it must be something in the new code that is causing the issue

      most of our readers come from facebook links so this is a big issue! thanks a lot for helping out

      Delete
    4. Just a thought. Have you tried using your original blogspot.com domain?

      Delete
    5. veeboo - Might want to add a meta description for each post?

      http://www.bloggersentral.com/2012/03/adding-meta-description-to-blogger.html

      Delete
    6. I got it to work veeboo using the "Search Description" when I created a new post on Blogger. I just put the text I wanted to show on FB and it appeared when I posted the link on FB.

      Delete
    7. hey, yup i tried that, doesnt work. im so confused :( thanks for your help though!

      Delete
    8. hey kansas bob, thanks so much! sorry im just seeing this now. the meta description on each post worked great for the text description, but im still having no luck getting a thumbnail to appear. i just played with it for an hour trying to figure out different ways to do it, but nothing worked.

      i have the specific code facebook looks for for the preview image which is < meta property="og:image" content="http://www.onjd.com/image.jpg" />

      but blogger/dynamic views won't allowing me to edit the html of my blog to put it in under < head>

      even if i can get that done, its not an ideal fix because facebook would still only see that one thumbnail all the time, and not pick up the new ones as tehyre posted, as it used to do before dynamic views (unless i manually change it each time of course)

      aahhhh frustrating!!! but i appreciate the help & input from both bob and yoga

      Delete
  7. Hi Yoga! I'm a regular here and love your tips. I stumbled onto a question myself and thought Yoga would be the man to go to.

    See, I got this new "Subscribe" widget that I'm totally digging: http://www.way2blogging.org/2012/02/mashable-style-social-subscription-widget-for-blogger-blogspot.html

    But when I add it to my sidebar, it just doesn't feel right.

    How do I add a widget to my sidebar, without the borders and background? I made you this picture for better understanding: http://i43.tinypic.com/xmsxsj.png

    Plus I use the Awesome Inc template, refer to this image for exact template: http://i40.tinypic.com/idwxg5.png

    Thanks man! If you could write a tutorial on this, it would be awesome. People could use it for other things such as posting ads without the sidebar background, etc.

    ReplyDelete
    Replies
    1. Hi Nick,

      I suppose this is fixable. But almost all the time, there is no one generic answer. The fix will depend on your code, and I'd have to inspect your blog to suggest something - thus the reason why it is difficult to publish a post on this. Shall we have a look at your blog then?

      Delete
    2. Great to hear from you Yoga.

      This fix is taking place on a test site. I'm working on a new theme for a major site. Link: http://bit.ly/IlG0xh

      Also this is what I'm trying to achieve: http://img718.imageshack.us/img718/6945/subscribebox.png

      Great great thanks Yoga!

      Delete
    3. Hi Nick,

      This is the closest I can get to with CSS:

      #w2b-mashable{
      width:310px;
      position: relative;
      left: -32px;
      top: -55px;
      margin-bottom: -70px;
      }

      Cheers..

      Delete
    4. Actually, not bad my man! Tweaked it around and came pretty darn close - http://bit.ly/IlG0xh

      Thanks Yoga!

      Delete
  8. Hi Thanks for the great tutorials!

    I have a question. You see how in your demo photo for this one, your header bar does not show the drop down tab of the dynamic view options. The links starts straight from home. How do I get rid of mine?

    ReplyDelete
    Replies
    1. Hi Mademishelle,

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

      #views{
      display: none;
      margin-right: -5px;
      }
      #header #pages:before{
      border-left: none !important;
      }

      Cheers!

      Delete
  9. I like the advice you gave Mademishelle. Is there a way to center the contents of the header bar?

    ReplyDelete
  10. Or instead maybe limit the width of the header bar to match the width of the banner image? Thanks!

    ReplyDelete
    Replies
    1. Yo Bob,

      Limiting the width of the header bar (or anything dynamic in Dynamic Views) will be disastrous. You can, however, center the links in the header bar. Check out this post:

      Centering Header Links in Blogger Dynamic Views

      Cheers!

      Delete
  11. Hi Mr. Yogaratnam

    Sir can i know what called to your gadget use in
    "You might also like: "
    It is so cool.I hope you can post a tutorial for that...
    I wonder if that gadget is working to Dynamic view.
    I am new in Dynamic,this article was convince me to use Dynamic...
    So cool and helpful tutorial...

    Thank you sir Yoga...

    ReplyDelete
    Replies
    1. Hi Reyes,

      It's called LinkWithin. There are plenty of tutorials already posted for it. just Google 'Linkwithin Blogger Tutorial' and you'll stumble upon many. Unfortunately, there's no way to make it work in Dynamic Views.

      Cheers.

      Delete
    2. Ahh bummer. Good to know, I was having no luck with it and their support team have ignored a couple of emails asking if dynamic views was the problem. What a shame!

      Delete
  12. Thanks!! This helps a lot already, but is it actually possible to completely remove this header on dynamic view???

    ReplyDelete
    Replies
    1. Hi Legitalog,

      Try this. 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-drawer{
      display: none;
      }

      Delete
    2. Thanks for the great help! Is there any way to remove the header bar completely without loosing the icons? Thanks in advance!!

      Delete
    3. Hi a+i,

      You're most welcome. What icons are you referring to?

      Delete
    4. Found out how to fix the problem with another one of your posts! Now wondering if I can change the date ribbon image and remove the subscribe gadget. Again, thank you for the brilliant guidance!

      Delete
    5. Hi a+i,

      1) What would you like to change the ribbons into?

      2) Yes, add this to your CSS:

      #gadget-dock div:last-child{
      display: none !important;
      }

      Cheers.

      Delete
    6. I would like to change the ribbons into either a red rectangle or even a simply transparency and keep the date in a red font...any of this possible?

      Also, the CSS to remove the gadget freezes the rest of my dock.

      Once again, you are an enormous help! Thanks Thanks!!

      Delete
    7. The CSS code works fine when I tested it, and it's more likely that the freezing is caused by some other source. Mind if i take a look?

      Red rectangle - gonna be hard unless if you have a picture of a red rectangle, then we MIGHT be able to replace the ribbon. Transparent ribbon will be much more practical and easier. Here, add this to your CSS:

      .ribbon .ribbon-piece {
      background: transparent !important;
      box-shadow: 0 0 0 transparent !important;
      }
      .ribbon .ribbon-piece {
      color: red !important;
      }

      Cheers :)

      Delete
    8. Couldn't have been easier! You're such a wonderful help!! Thanks again, and sorry if a few more questions come your way in the future.

      Many thanks!

      Delete
    9. Feel free to shoot em :)

      Cheers!

      Delete
  13. Hey! :D Great tutorials, can you tell me how I can remove that black bar? it's very annoying :P

    ReplyDelete
    Replies
    1. Sure. Add this to your CSS:

      .header-drawer{
      display: none !important;
      }
      #header .header-bar {
      box-shadow: 0px 0px 0px 0px !important;
      }

      Cheers :)

      Delete
    2. This worked perfectly for me, thank you! But there's white space/a gap between my header image and the posts, any way to remove this?

      Delete
    3. Let's have a look at your blog - what's your blog's address?

      Delete
    4. This comment has been removed by the author.

      Delete
    5. This should work. Adjust the value 10px.

      #main{
      position: relative;
      top: -10px;
      }

      Delete
  14. Hi, first, thanks for your last reply :) Now I observed new problem. When I click on post link (from menu) to see that post, suddenly header bar again automatically hide itself and re-appear. Conclusion is normally code works but doesn't when you see only one page.

    ReplyDelete
    Replies
    1. Hi Phoe,

      Mind if I take a look? What's your blog's address?

      Delete
    2. Hi, again :) I see now that this is ok, but problem is still similiar because with floating header - I use code from your tutorial and normally is not-floathing, but when I view single post suddenly again is floathing ^_^

      My site: cambiare-podentes.blogspot.com

      Delete
    3. Hi Phoe,

      Can I see a link of a post when it changes to non-floating?

      Cheers~

      Delete
    4. Hi, there: http://cambiare-podentes.blogspot.com/2012/06/rozdzia-1.html

      Delete
    5. Hi, there:
      http://cambiare-podentes.blogspot.com/2012/07/rozdzia-2.html

      Delete
    6. Hi Phoe,

      It seems like Blogger's script is overriding the custom tweak when a page is accessed directly via its directlink. The header will be non-floating if you access the link via your blog/homepage, but it'll revert back to its original state if links are accessed directly. Looks like we can't do anything about this.

      Delete
  15. Hi great tutorial. I want to ask how can I add other pages to m header bar like you have with home, followers, page 1, page 2, etc.?

    ReplyDelete
    Replies
    1. Hi Collin,

      You can add more pages/links by going to Dashboard - Pages - New Page.. Cheers :)

      Delete
  16. Hi,

    Is there a way that the whole page can be scrolled up and down in dynamic view, as currently only body part can be scrolled and header and navigation bar is fixed state. (http://www.teekhabollywood.com)

    Thanks in advance.

    ReplyDelete
  17. Hi, I was wondering if it was possible to add ads by amazon to my blog? I can't find a way to do it

    ReplyDelete
    Replies
    1. Hi Siddique,

      You can add your ads to the HTML section of your posts. That's the only feasible way of adding non-adsense ads to Dynamic View that I can think of for now. There isn't a way to add an ad globally to the whole template.

      Delete
  18. Anyone know how you can change the colour of the dashboard/new post icon so if you have a white header bar, they'll show up in a different colour?

    ReplyDelete
    Replies
    1. Hi Dan,

      Blogger doesn't allow us to personalize the look of Blogger dashboard in any way.

      Cheers :)

      Delete
  19. Hi,

    Your tricks are simply awesome. I want to clear one doubt, I am using dynamic view template for blogger and now i want to remove the header (Name) and I want add a picture header. I learned how to do it separately from your blog. Kindly let me know how to do it.

    ReplyDelete
    Replies
    1. Hi there,

      Here's a walkthrough on how you can add picture header:

      http://www.southernspeakers.net/2011/10/add-header-in-blogger-dynamic-view.html

      I've also included a small instruction on how you can disable your title so that it wouldnt obstruct your header image. Let me know if you need further help :)

      Cheers..

      Delete
  20. Please state the blog URL and any other details that you consider relevant, so we can address your issue quickly.
    My head-bar is moving down when I croll the main side bar down, how can I fix thie pb ?

    I do recognize that I have modified a few sizes as I added a header and so on, so it might be the reason why...

    Any adjustment I can make to fix this problem !

    I would like to thank you so much as well with all the help you have been offered with your blog. Amazing !!

    Cheers from France,

    Here is my blog : theyogiwanderer.blogspot.com


    Thomas

    ReplyDelete
    Replies
    1. Hi Tom,

      Have you got it fixed? Coz your header bar is scrolling with your blog (towards up).. What am I missing?

      Delete
  21. Hi there,

    Your tricks are awesome! I have used a couple of them and they're working great.

    I've tried looking for the answer to my question but I can't seem to find it.

    Question is: Is there a way to make the links on the sticky header bar open in a new window.

    Here is my blog: www.mybubandme.blogspot.ca
    What I would like is my links to instagram, twitter, and pinterest to open in a new page.

    Please let me know if that is possible.

    Thanks so much!

    ReplyDelete
    Replies
    1. Hi Anna,

      You can't specifically make one link to open in a new tab. There used to be a way to make all links open in new tabs, but even that method isn't something I'd recommend to anyone anymore, because it could stop your template from receiving future updates.. I'm sorry I couldn't be much more of a help..

      Cheers..

      Delete

  22. i submitted another question, but i wanted to update...i can't seem to get rid of the header bar. when i use the code to get rid of it, it turns white/transparent. it won't go away!

    also one more thing...is there a way to make the sidebar menu (left on sidebar view) stick? when you click on the lower items, it moves up, awkardly. and i don't think the scrollbar looks too keen on my blog. i would love it to just stick and maybe even move when the the viewer scrolls the entire page. possible?

    i am the one who had the entire blog mess up because statcounter gave me some stupid instructions! i had to start from scratch because my backup did not work out for some strange reason.

    thank you so so so so much. i am so stressed because some big creative directors want to see my work and i can't have my site looking wonky! :)
    thank you so much!

    ps if i was not clear, i got the header bar to be the same color and i removed the shadows. but before i had the entire header bar gone. which i loved.

    ReplyDelete
    Replies
    1. Hi there,

      I left a reply here --> Comment Reply

      What you're after sounds fixable. But, the things is, you really need to fix your template before making further changes - otherwise you're only gonna make more damages to your blog. If you have no clue what I'm talking about do refer to my previous reply in the link above.

      Cheers :)

      Delete
  23. LOVE your tips and tweaks!

    Any way to add separators (vertical lines) between pages/tabs in header bar?

    ReplyDelete
    Replies
    1. Hi there,

      I was going to publish a post on this, but I don't wanna keep you waiting, so here's how you can add separators between your links. Go to your 'Add CSS' box and add the following code:

      #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;
      }
      #header .tabs li:first-child{
      border-left: 0px;
      }

      Let me know how it goes. Cheers and God bless :)

      Delete
  24. Hi, on my header bar, I'd like to move a little the pages' title on the right (create a margin between the left and the first page title)

    thank you very much

    ReplyDelete
    Replies
    1. Hi Christine,

      I'm going to have to look at your blog before I could suggest something useful. What's your blog's address?

      Cheers :)

      Delete
    2. Hi, I solved my problem by changing the layout. thank you by the way

      I've another question : do you know why my blog is loaded in two steps ? After 1 or 2 seconds, the layout moves slightly ...

      Here is my blog adress : http://christinetruchet.blogspot.fr/

      Thank you in advance

      Delete
    3. Hi there,

      I couldn't sense any movement when I tried loading your blog. What browser (and version) are you using?

      Delete
  25. Hi,

    I'm using Google Chrome Version 23.0.1271.95 . But it actually works OK on IE and Mozilla, don't know why ....

    Thank you

    ReplyDelete
    Replies
    1. Hi Christine,

      Some browsers render pages differently from others. I'm afraid there isn't anything we can do from our end to change this behavior.

      Delete
  26. Hi Yoga,
    this trick works for me only in the sidebar view "which is my default view".
    Is there any way I can apply it to all other views?
    Thank You

    ReplyDelete
    Replies
    1. Hi Tarad,

      This tweak isn't exclusive to Sidebar view alone, it should work with the other views as well. Let's have a look at your blog. What's your blog's address?

      Delete
    2. www.talfandi.com
      It is working with my default sidebar view but if you switch to any other view you will see what I mean
      Thanks

      Delete
    3. Hi Tarad,

      It seems like the code that you've used to add your header is faulty. This is what you should have. Please update accordingly:


      #header .header-drawer.sticky, #header .header-drawer {
      top: 118px;
      }

      #header .header-bar{
      height: 149px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 149px;
      }

      #header-container {
      height: 189px;
      }

      .viewitem-panel .viewitem-inner {
      top: 84px;
      padding-bottom: 104px !important;
      height: auto !important;
      }

      #header-container #header.header .header-bar span.title{
      background: url(http://3.bp.blogspot.com/-I9hnvAmFEDs/UHFYQP38fVI/AAAAAAAAAd0/xozu-RtkfsU/s230/tr_transparent.png)
      repeat-y left;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 149px;
      }

      Cheers :)

      Delete
    4. You are the best :)
      Thanks a lot

      Delete
  27. I tried this before and it worked flawlessly, but since I changed the dynamic view layout, it doesn't work. Do you know what I am doing wrong?

    www.marleysimonestyle.com

    ReplyDelete
    Replies
    1. Hi Marley,

      The problem lies in the code that you've used to add your header image. The values in it don't agree with each other. This is the correct one:


      #header .header-drawer.sticky, #header .header-drawer {
      top: 159px;
      }

      #header .header-bar{
      height: 190px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 190px;
      }

      #header-container {
      height: 230px;
      }

      .viewitem-panel .viewitem-inner {
      top: 125px;
      padding-bottom: 145px !important;
      height: auto !important;
      }

      #header-container #header.header .header-bar span.title{
      background: url(http://4.bp.blogspot.com/-D0omhbtX6v4/UAjQDCKlE4I/AAAAAAAAMrk/bY_gDKPUKX0/s1600/Grey+Header.jpg)
      no-repeat center;
      margin-left: auto !important;
      margin-right: auto !important;
      height: 190px;
      }

      Please update your code accordingly. Also, I've realised that some of your code is repeating itself several times. These duplicates codes are only gonna put your template in trouble sooner or later. Remove the duplicates to be on the safe side.

      Cheers :)

      Delete
  28. All I can say is, "You are brilliant!"

    ReplyDelete
  29. Thank you so much for all your advices, it really helps me! I have a question and hope i will be clear enough (i'm french so... not easy!). My blog title is bigger now (one of your tutorial helps me) but it is a little bit hidden behind the header bar (with differents links). I just want to change the position of the header bar so that it could be lower... Is it possible? Thanks again for your gifts!!! Have a good day :-)
    Delphine

    ReplyDelete
    Replies
    1. It sounds possible, but I'm not gonna be able to suggest anything useful without inspecting your blog - as each template is different from the others. So, let's have a look at your blog. What's your blog's address?

      Delete
    2. Hi,
      Thanks. Here is my blog address :
      http://lavoixdelph.blogspot.fr

      Delete
    3. Right.. Here, try this:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 59px;
      }

      #header .header-bar{
      height: 90px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 90px;
      }

      #header-container {
      height: 130px;
      }

      .viewitem-panel .viewitem-inner {
      top: 25px;
      padding-bottom: 45px !important;
      height: auto !important;
      }

      #header-container #header.header .header-bar span.title{
      height: 90px;
      }

      Cheers :)

      Delete
  30. Incredible, you are a genius!!
    Thank you so much for your generosity, the time you've spent for my request and all your tutorials...
    I wish you the best :-)

    ReplyDelete
  31. Hey there !

    I don't know if anyone has talked about this problem before but I'm having trouble with my sticky header bar in Google Chrome.
    It works perfectly in Firefox but I don't know why, Chrome messed it all up.
    Do you know anything about this? It's pretty important since I'm trying to find a job and I have to send my portfolio to employers :s

    Thanks !

    ReplyDelete
    Replies
    1. Hi Morgane,

      No I havent heard anything, yet. Do you have a link I could look at, to see if I can figure what's causing the issue in your blog?

      Delete
  32. Hi Yoga, the code works very well on my desktop, but is ignored on an iPad. That is not really a problem, and seems to be the same behavior than buzz.blogger.com.
    However it has a strange side effect on the iPad. When I scroll the page, the header scrolls too, but once I stop the header bar reappears overriding part of the blog text. This does not happen with buzz.blogger.com. Any suggestion?

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Hi Mirko,

      I do not have an iPad, and as such, I could not replicate your problem. Could you send me a screenshot so that I can better understand what is going on?

      Delete
    2. Hi Yoga, the following code appears to work in every situation on the desktop and the iPad. Does that make sense?

      #header .header-drawer.sticky, #header .header-drawer{
      top: 65px !important;
      margin-top: 0px !important;
      position: fixed !important;
      }
      #header .header-bar{
      top: 0px !important;
      margin-top: 0px !important;
      position: fixed !important;
      }

      Delete
    3. Hi Mirko,

      To be honest, I'm not even quite sure what the issue is. Isn't there an app to take screenshot in iPad? There must be one.

      Delete
  34. How can I send you a snapshot of my iPad screen?

    ReplyDelete
  35. Hi Yoga,

    Love the tweak, but there's one issue i am finding.

    When the width of the browser drops to 600px below (mobile devices), the 65px fixed position is too large. The header shrinks to 50px.

    Any thoughts on how to take both header sizes into account with your CSS?

    Thanks
    Jesse

    ReplyDelete
    Replies
    1. Hi Jesse,

      I'm afraid we can't set two static values in the code. Best way forward is to disable mobile view and force desktop view on mobile devices instead.

      Delete
  36. hello!
    I don't seem to be able to do this..

    can you help me?
    my code is

    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 134px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }

    and it doesn't work! my blog is www.sofianaaustralia.com

    thanks for all your help!
    sofia

    ReplyDelete
    Replies
    1. Hi Sofia,

      Some of your CSS code is repeating itself several times (I've warned you about this several times before). Until you consolidate these codes and remove all duplicates that you can find, you're gonna keep running into problems each time your try to change something..

      Delete
  37. yoga!

    Thank you, I am totally lost. can I send you my css? can you just tell me which ones should i delete?

    cheers sofia

    ReplyDelete
    Replies
    1. Hi Sofia,

      I would do it for you but I'm extremely tied up at the moment with lots of assignments.. It's pretty simple actually.. Go to your 'Add CSS' box in your template designer, compare each code with the ones below.. If they appear identical, just get rid one of them.. Using 'Ctrl + F' could be helpful to see if a code is repeating or not..

      Repeat the steps until there are no more duplicate codes in your CSS..

      Delete
  38. Hi Yoga,

    Good luck with your assigments!
    I am stuck i am a zero at css, they all look different to me..

    ReplyDelete
    Replies
    1. Hi Sofia,

      If you could wait bump me up again some time this weekend and I'll see if I can find some time for you..

      Cheers..

      Delete
    2. Yoga!

      Mate, thank you! I will, thank you and good luck for you! x

      Delete
  39. ALL your code for Dynamic themes works! Thanks a million for creating and sharing. It really helps a lot!

    ReplyDelete
  40. This helped a lot thanks! I'm still having a slight problem though. My banner is 1050x400, and if I change the height from the code from your other tutorial:

    #header-container #header.header .header-bar span.title{
    background: url(http://i42.tinypic.com/33tm160.jpg)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 400px;
    }

    It will reveal more of the banner, but covering up the post and the title like this: http://i41.tinypic.com/34t92sp.png. So how do I actually get more space between the banner and the actual post space?

    ReplyDelete
    Replies
    1. The answer lies in the other tutorial. The original tutorial had a header height of 165px. If you're increasing the height to 400px (an increment of 235px from the original value), you need to add 235px to all the numeric value in the code in the OTHER tutorial. Once you've got that sorted, you can proceed with the tutorial on this page.

      Delete
  41. HUGE help! Thanks a ton for taking time to post these tips. I hated the disappearing menu bar on my blog! You made my day.

    www.outdoorsbycracky.blogspot.com

    ReplyDelete
    Replies
    1. Thanks Justin :) And sorry for the late reply! :D

      Delete
  42. Thanks ( I do not speak English... :D XD XD XD)

    -----------------------------------
    the code worked for me


    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 165px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }

    --------------------------------------

    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 165px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }

    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px; !important;
    }

    #header .header-bar{
    height: 165px;
    }
    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }
    #header-container {
    height: 205px;
    }
    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://4.bp.blogspot.com/-CqTD0dzPrXw/UeDThHyAG2I/AAAAAAAAAZo/rxJyNQL-kCA/s1600/blog-+pablo+hasel-+portada.gif)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    ReplyDelete
  43. Hello Yoga, I put this code and my links still disappears: http://pistolangkaraan.blogspot.com Please help.

    I have also inserted this after...

    #gadget-dock{
    position: fixed !important;
    right: 0px !important;
    }

    Please help.

    ReplyDelete
    Replies
    1. Hi Pistolang,

      The code above is to make your header sticky. Could you tell more about your problem?

      Delete
  44. Im using Chrome, and sometimes the bar where my links are, disappears. When i put Http:// sometimes it appears. See http://www.pistolangkaraan.blogspot.com and http://www.knoxxie.blogspot.com

    Is it just the browser or I did something wrong? Please help.

    ReplyDelete
  45. I couldnt put photo here so i uploaded it to my blog... Please see:

    http://pistolangkaraan.blogspot.com/2013/07/here-is-photo.html

    If i use firefox and so many refreshes the link shows.. I dont know what i did wrong, pleasse help.

    ReplyDelete
    Replies
    1. Hi Ridgid,

      Here, see the post in the link below. This should solve your problem:

      http://www.southernspeakers.net/2013/07/finally-fix-for-blogger-dynamic-view.html

      Cheers :)

      Delete
  46. Hello,
    I found your blog very useful. It helped a lot with mine.
    Now, i have an issue with the header drawer, it keeps flickering when the mouse is on it...what can i do?
    http://coachingactu33.blogspot.fr/

    ReplyDelete
    Replies
    1. Hello there,

      I could not view your blog in full, coz it seems like your template is still being timed out before it fully loads. Can I interest you in a possible fix, before we even take a look at your jumper header drawer:

      http://www.southernspeakers.net/2013/07/finally-fix-for-blogger-dynamic-view.html

      Delete
  47. Hi Yoga,
    Your CSS codes on this site http://technohulk.blogspot.in/
    is working differently on Chrome and Firefox...how to change that?

    ReplyDelete
    Replies
    1. Is there a particular tweak that's showing this behavior? Could you elaborate more on what I should look out for?

      Delete
  48. Hi there it didn't quite work for my site as the header bar is still floating up and down. it is kind of 'hiding' behind the blog title in fact.

    ReplyDelete
    Replies
    1. Were there any changes made to the values in the code? What's your blog's address?

      Delete
  49. Yoga please how do you center the pages/tabs in the header bar rather than have it aligned left?

    ReplyDelete
    Replies
    1. See if this is what you're looking for:

      http://www.southernspeakers.net/2012/03/centering-header-links-in-blogger.html

      Delete
  50. Hi. I just used this code, but I am just not getting there. It still appears the same to me, and this is what i have. So i have the code for the header first, a blank line and than I have this code, but it is not working for me . What shall I do?


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }

    #header .header-bar{
    height: 165px;
    }

    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 165px;
    }

    #header-container {
    height: 205px;
    }

    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    #header-container #header.header .header-bar span.title{
    background: url(http://3.bp.blogspot.com/-YYF5cNHyn10/U_Jd3Lk7uiI/AAAAAAAAAwE/_F4WDACiWEU/s380/78979%2Bvyholiu7v.png)
    no-repeat center;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 165px;
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #header .header-drawer.sticky{
    margin-top: 0px !important;
    position: fixed !important;
    top: 65px !important;
    -moz-transition: top 0.0s linear 0.0s !important;
    -webkit-transition: top 0.0s linear 0.0s !important;
    -ms-transition: top 0.0s linear 0.0s !important;
    -o-transition: top 0.0s linear 0.0s !important;
    }

    ReplyDelete
    Replies
    1. The numbers were for line reference only. They are not meant to be in your 'Add CSS' box.

      Delete
  51. Lovely blog! I am blogging for years already, but these little twitches make my website so much more professional.. Awesome!

    ReplyDelete
  52. Hey there!

    I already have a customized menu bar, do you know how I can make the background width larger?
    Thanks!
    Felicia

    ReplyDelete
    Replies
    1. Hi ya I've lost your URL, can I have a look at your blog again?

      Delete
  53. Hello there!

    I love your blog, and had use of many of your tutorials. Thanks!
    I have a sticky header bar, but it shakes when pointing at it and it's difficult choosing a page. Do you happend to know whats wrong? My site is http://miljovalg.blogspot.com/

    Thanks!
    Grethe

    ReplyDelete
    Replies
    1. Hello Grethe,

      Sorry for the late reply (I just got married very recently). You've got values all wrong, thus the shaking.

      Look for these lines:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 234px;
      }
      #header .header-bar{
      height: 234px;
      }
      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 234px;
      }
      #header-container {
      height: 304px;
      }
      .viewitem-panel .viewitem-inner {
      top: 200px;
      padding-bottom: 220px !important;
      height: auto !important;
      }

      Change them values like the ones below:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 203px;
      }

      #header .header-bar{
      height: 234px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 234px;
      }

      #header-container {
      height: 205px;
      }

      .viewitem-panel .viewitem-inner {
      top: 169px;
      padding-bottom: 189px !important;
      height: auto !important;
      }

      Delete
    2. Congrats on your marriage!
      Thank you for your help, the shaking is gone now. But now the top of the head topic is cut. Maybe you know what that problem is caused by, or I will have to do some more research.

      Thanks anyway!

      Delete
    3. Thanks! Btw I think I'm not seeing what you're seeing. Could you perhaps take a screenshot and (upload it somewhere, get the link) send it to me?

      Delete
  54. Hey Yoga, your blog is a huge help. I was actually trying to have my header bar hide as people scroll down once I have more posts. I'm unsure why it doesn't do that already since you have a code to prevent that from happening. Thanks!

    ReplyDelete
    Replies
    1. Hello Richard,

      Is your header not hiding by default? What's your blog's address?

      Delete
    2. Yea it's not hiding for some reason. At first I thought it was the codes I was adding but even when I remove them it still floats at the top. My blog's address is SketchyRich.com

      Delete
    3. I get what you mean now. Looks like Blogger has changed this to default. Well, to perform the reverse on our own (auto-hide) is a little tricky. I'll see if I can dive deep into the codes when I get some spare time.

      Delete
    4. I definitely appreciate it but If it's too troublesome then don't sweat it. It's not absolutely necessary, I just thought that once I put links onto that bar to different social media sites it would distract from my posts.

      Delete
    5. I'm in this same boat as well. I'd like it to hide as I scroll down.

      Delete
  55. My header is sticky on all static pages, however the Home page will hide when scrolling.
    chitscast.blogspot.com

    ReplyDelete
    Replies
    1. Sorry for the late reply. Let me know if you still need help on this.

      Delete

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