Before |
After |
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.
Happy Easter everyone :)
#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 :)
Great tip Yoga! Thanks much! Happy Easter!
ReplyDeleteHappy Easter to you too Bob :)
DeleteNot 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. :)
DeleteThanks Yoboy!
Hi Bob,
DeleteI 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.
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.
DeleteIf 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!
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?
DeleteThat 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!
DeleteYou too Bob :)
DeleteHappy Easter to you darling=)
ReplyDeleteHappy Easter to you too sweetheart :)
ReplyDeleteXoXo
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?
ReplyDeleteSorry, 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.
Hi tomcha,
DeleteYes 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?
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.
DeleteWhat 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.
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:
Delete#gadget-dock{
position: fixed !important;
right: 0px !important;
}
Cheers! :)
Perfect. Thanks!
DeleteNo biggie :)
DeleteAnd 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.
ReplyDeleteThanks again.
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.
DeleteGreat great tips! Thanks!
ReplyDeletehi yoga,
ReplyDeletei 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!
Hi veeboo,
DeleteThanks 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.
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.
Deletehey kansas bob, thanks so much for the tip. i tried it but it didnt work :(
Deletehere 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
Just a thought. Have you tried using your original blogspot.com domain?
Deleteveeboo - Might want to add a meta description for each post?
Deletehttp://www.bloggersentral.com/2012/03/adding-meta-description-to-blogger.html
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.
Deletehey, yup i tried that, doesnt work. im so confused :( thanks for your help though!
Deletehey 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.
Deletei 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
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.
ReplyDeleteSee, 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.
Hi Nick,
DeleteI 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?
Great to hear from you Yoga.
DeleteThis 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!
Hi Nick,
DeleteThis is the closest I can get to with CSS:
#w2b-mashable{
width:310px;
position: relative;
left: -32px;
top: -55px;
margin-bottom: -70px;
}
Cheers..
Actually, not bad my man! Tweaked it around and came pretty darn close - http://bit.ly/IlG0xh
DeleteThanks Yoga!
That's great! :)
DeleteHi Thanks for the great tutorials!
ReplyDeleteI 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?
Hi Mademishelle,
DeleteGo 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!
I like the advice you gave Mademishelle. Is there a way to center the contents of the header bar?
ReplyDeleteOr instead maybe limit the width of the header bar to match the width of the banner image? Thanks!
ReplyDeleteYo Bob,
DeleteLimiting 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!
Hi Mr. Yogaratnam
ReplyDeleteSir 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...
Hi Reyes,
DeleteIt'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.
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!
DeleteThanks!! This helps a lot already, but is it actually possible to completely remove this header on dynamic view???
ReplyDeleteHi Legitalog,
DeleteTry 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;
}
Thanks for the great help! Is there any way to remove the header bar completely without loosing the icons? Thanks in advance!!
DeleteHi a+i,
DeleteYou're most welcome. What icons are you referring to?
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!
DeleteHi a+i,
Delete1) 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.
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?
DeleteAlso, the CSS to remove the gadget freezes the rest of my dock.
Once again, you are an enormous help! Thanks Thanks!!
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?
DeleteRed 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 :)
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.
DeleteMany thanks!
Feel free to shoot em :)
DeleteCheers!
Hey! :D Great tutorials, can you tell me how I can remove that black bar? it's very annoying :P
ReplyDeleteSure. Add this to your CSS:
Delete.header-drawer{
display: none !important;
}
#header .header-bar {
box-shadow: 0px 0px 0px 0px !important;
}
Cheers :)
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?
DeleteLet's have a look at your blog - what's your blog's address?
DeleteThis comment has been removed by the author.
DeleteThis should work. Adjust the value 10px.
Delete#main{
position: relative;
top: -10px;
}
Perfect, thank you!
DeleteHi, 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.
ReplyDeleteHi Phoe,
DeleteMind if I take a look? What's your blog's address?
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 ^_^
DeleteMy site: cambiare-podentes.blogspot.com
Hi Phoe,
DeleteCan I see a link of a post when it changes to non-floating?
Cheers~
Hi, there: http://cambiare-podentes.blogspot.com/2012/06/rozdzia-1.html
DeleteHi, there:
Deletehttp://cambiare-podentes.blogspot.com/2012/07/rozdzia-2.html
Hi Phoe,
DeleteIt 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.
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.?
ReplyDeleteHi Collin,
DeleteYou can add more pages/links by going to Dashboard - Pages - New Page.. Cheers :)
Hi,
ReplyDeleteIs 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.
Hi Anon,
DeleteI've got just what you need:
Non-Floating Header in Blogger Dynamic View
Cheers :)
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
ReplyDeleteHi Siddique,
DeleteYou 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.
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?
ReplyDeleteHi Dan,
DeleteBlogger doesn't allow us to personalize the look of Blogger dashboard in any way.
Cheers :)
Hi,
ReplyDeleteYour 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.
Hi there,
DeleteHere'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..
Please state the blog URL and any other details that you consider relevant, so we can address your issue quickly.
ReplyDeleteMy 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
Hi Tom,
DeleteHave you got it fixed? Coz your header bar is scrolling with your blog (towards up).. What am I missing?
Hi there,
ReplyDeleteYour 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!
Hi Anna,
DeleteYou 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..
ReplyDeletei 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.
Hi there,
DeleteI 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 :)
LOVE your tips and tweaks!
ReplyDeleteAny way to add separators (vertical lines) between pages/tabs in header bar?
Hi there,
DeleteI 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 :)
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)
ReplyDeletethank you very much
Hi Christine,
DeleteI'm going to have to look at your blog before I could suggest something useful. What's your blog's address?
Cheers :)
Hi, I solved my problem by changing the layout. thank you by the way
DeleteI'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
Hi there,
DeleteI couldn't sense any movement when I tried loading your blog. What browser (and version) are you using?
Hi,
ReplyDeleteI'm using Google Chrome Version 23.0.1271.95 . But it actually works OK on IE and Mozilla, don't know why ....
Thank you
Hi Christine,
DeleteSome browsers render pages differently from others. I'm afraid there isn't anything we can do from our end to change this behavior.
Hi Yoga,
ReplyDeletethis 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
Hi Tarad,
DeleteThis 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?
www.talfandi.com
DeleteIt is working with my default sidebar view but if you switch to any other view you will see what I mean
Thanks
Hi Tarad,
DeleteIt 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 :)
You are the best :)
DeleteThanks a lot
You're most welcome Tarad :)
DeleteDon't mention it :)
ReplyDeleteI 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?
ReplyDeletewww.marleysimonestyle.com
Hi Marley,
DeleteThe 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 :)
All I can say is, "You are brilliant!"
ReplyDeleteYou're so nice, thanks! :)
DeleteThank 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 :-)
ReplyDeleteDelphine
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?
DeleteHi,
DeleteThanks. Here is my blog address :
http://lavoixdelph.blogspot.fr
Right.. Here, try this:
Delete#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 :)
Incredible, you are a genius!!
ReplyDeleteThank you so much for your generosity, the time you've spent for my request and all your tutorials...
I wish you the best :-)
You've just made my day. Thanks :)
DeleteHey there !
ReplyDeleteI 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 !
Hi Morgane,
DeleteNo 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?
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.
ReplyDeleteHowever 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?
This comment has been removed by the author.
ReplyDeleteHi Mirko,
DeleteI 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?
Hi Yoga, the following code appears to work in every situation on the desktop and the iPad. Does that make sense?
Delete#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;
}
Hi Mirko,
DeleteTo 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.
How can I send you a snapshot of my iPad screen?
ReplyDeleteHi Yoga,
ReplyDeleteLove 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
Hi Jesse,
DeleteI'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.
hello!
ReplyDeleteI 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
Hi Sofia,
DeleteSome 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..
yoga!
ReplyDeleteThank you, I am totally lost. can I send you my css? can you just tell me which ones should i delete?
cheers sofia
Hi Sofia,
DeleteI 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..
Hi Yoga,
ReplyDeleteGood luck with your assigments!
I am stuck i am a zero at css, they all look different to me..
Hi Sofia,
DeleteIf you could wait bump me up again some time this weekend and I'll see if I can find some time for you..
Cheers..
Yoga!
DeleteMate, thank you! I will, thank you and good luck for you! x
ALL your code for Dynamic themes works! Thanks a million for creating and sharing. It really helps a lot!
ReplyDeleteThis 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:
ReplyDelete#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?
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.
DeleteHUGE help! Thanks a ton for taking time to post these tips. I hated the disappearing menu bar on my blog! You made my day.
ReplyDeletewww.outdoorsbycracky.blogspot.com
Thanks Justin :) And sorry for the late reply! :D
DeleteThanks ( I do not speak English... :D XD XD XD)
ReplyDelete-----------------------------------
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;
}
Excellent :)
DeleteHello Yoga, I put this code and my links still disappears: http://pistolangkaraan.blogspot.com Please help.
ReplyDeleteI have also inserted this after...
#gadget-dock{
position: fixed !important;
right: 0px !important;
}
Please help.
Hi Pistolang,
DeleteThe code above is to make your header sticky. Could you tell more about your problem?
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
ReplyDeleteIs it just the browser or I did something wrong? Please help.
I couldnt put photo here so i uploaded it to my blog... Please see:
ReplyDeletehttp://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.
Hi Ridgid,
DeleteHere, 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 :)
Damn you're good. Thanks a lot!
ReplyDeleteYou're most welcome :)
DeleteHello,
ReplyDeleteI 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/
Hello there,
DeleteI 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
Hi Yoga,
ReplyDeleteYour CSS codes on this site http://technohulk.blogspot.in/
is working differently on Chrome and Firefox...how to change that?
Is there a particular tweak that's showing this behavior? Could you elaborate more on what I should look out for?
DeleteHi 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.
ReplyDeleteWere there any changes made to the values in the code? What's your blog's address?
DeleteYoga please how do you center the pages/tabs in the header bar rather than have it aligned left?
ReplyDeleteSee if this is what you're looking for:
Deletehttp://www.southernspeakers.net/2012/03/centering-header-links-in-blogger.html
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?
ReplyDelete1
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;
}
The numbers were for line reference only. They are not meant to be in your 'Add CSS' box.
DeleteLovely blog! I am blogging for years already, but these little twitches make my website so much more professional.. Awesome!
ReplyDeleteHey there!
ReplyDeleteI already have a customized menu bar, do you know how I can make the background width larger?
Thanks!
Felicia
Hi ya I've lost your URL, can I have a look at your blog again?
DeleteHello there!
ReplyDeleteI 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
Hello Grethe,
DeleteSorry 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;
}
Congrats on your marriage!
DeleteThank 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!
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?
DeleteHey 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!
ReplyDeleteHello Richard,
DeleteIs your header not hiding by default? What's your blog's address?
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
DeleteI 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.
DeleteI 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.
DeleteI'm in this same boat as well. I'd like it to hide as I scroll down.
DeleteMy header is sticky on all static pages, however the Home page will hide when scrolling.
ReplyDeletechitscast.blogspot.com
Sorry for the late reply. Let me know if you still need help on this.
Delete