-
Posts
-
Hey Guys,
I haven’t updated my site since 2.5 and just did today without thinking about it. Committed cardinal sin and didn’t back up and lost a bunch of customization. I do use a child theme but not everything is filtered through functions etc. As I don’t always now how to do that.
my site is http://jackandaddi.com/
If you can help fix any of these that would be amazing as I am pretty pissed at myself for screwing this all up.
1: So I had a 2 part header hack that I made before. It was actually a hack to duplicate the kriesi header that everyone wanted: social alongside the main nav. I even posted this solution up as you guys weren’t giving it out, (but now I see my post has been deleted from the forum) ;(I do see now that you are natively giving this solution (which I implemented) but it doesn’t have the separation which I like and of course kriesi does. I used to make some css changes and make a small change in the header.php file but the header php file is very different now and my previous solution doesn’t work. Are you willing to help get the separation back from the main nav and the social media?
2: with the main nav social combo you now offer the big problem is that when the mobile nav is displayed on smaller devices the entire normal main nav block is hidden and you loose the social as well. I still want to have social nav even with the mobile nav box present. the current offering doesn’t allow this.
3: I do a logo slight of hand trick on my site and when the browser shrinks below portrait tablet size I hide my .logo and show a background image icon logo in its place. so it appears that the logo changed. this still works but not right. With your header changes when you now have a sticky header that shrinks when you scroll down on a desktop everything is the same and my large logo shrinks. But you have the sticky turned off on mobile (fine by me) but something isn’t working on the tablet size if you test and hit the tablet break point on my site when the smaller logo background image is showing the header still shrinks but the new background image doesn’t and I can’t figure out how to fix this. screen shot below showing this
If you can’t help with some of this that would be awesome. I am seeing many things aren’t working right so I am going to have to change a bunch of stuff again.
Hi!
1. Seems you already figured this out.
2. Add this to your 767px media query in style.css:
.social_bookmarks, .main_menu, #header_main_alternate{ display:block !important; } .social_bookmarks { margin-top: 20px !important; }3. You need to change the background-size value of the logo when scrolled, try putting this inside your 989px media query in style.css:
.header-scrolled div .logo { background-size: 33px 30px; }Best regards,
JosueI had to adapt 2: but this got me very close so thanks.
As for 3: this is working on the finished effect but is falling a bit short of what I want as a finished effect. If you look at the normal full size logo on shrink, the logo shrinks automatically as the header shrinks in infinite steps. This code doesn’t do that. From what I can tell at 50% of the header shrink the code activates and it shrinks the whole thing in one shot. But right before this it is cutting off the bottom of the logo pretty badly. You can see it if you slowly scroll down. It looks good at the start and end but not the middle.
how do we constrain the shrinking percentage wise to match that of the shrinking header (the same effect that is natively on the logo.
thanks
You could make it a transition, try:
.header-scrolled div .logo { background-size: 33px 30px; } div .logo { -webkit-transition: background-size linear 0.2s; -moz-transition: background-size linear 0.2s; transition: background-size linear 0.2s; }Best regards,
JosueThis didn’t work either. Sorry. I use div . logo already for my logo swap trick when the browser shrinks below 989. and I fI add it there it messes up that code. But if I add it to the .header-scrolled div . logo then it still does what I think you had in mind. (it transitions the shrink) but it still only activates at about 50% of the header shrink on scroll) but during that first waiting period if gets cut off.
any other ideas? I want this background I add at 989 breakpoint after hiding the .logo img… to shrink porportionatly on scroll just like the logo image does.
div .logo { background: url(http: (Email address hidden if logged out) ) top left no-repeat; top: 10px; background-size: 66px 60px; }If it is helpfull here is the full code that is making this happen…
/* adds the ja icon as a background and is set up for retina displays */ div .logo { background: url(http: (Email address hidden if logged out) ) top left no-repeat; top: 10px; background-size: 66px 60px; } /* makes the default logo transparent */ .logo img { opacity: 0 !important; filter: alpha(opacity=0); For IE8 and earlier -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } /* shrinks ja icon on scroll down */ .header-scrolled div .logo { top: 5px; background-size: 33px 30px; -webkit-transition: background-size linear 0.2s; -moz-transition: background-size linear 0.2s; transition: background-size linear 0.2s; }Hey!
That’s because the “header-scrolled” class gets assigned to the header when the shrinking is finished. You could change that in js/avia.js, function avia_header_size, around line 1300.
Regards,
JosueAny Chance for the code to change this. The only thing I know anything about is css and that is marginal at best. And I would of course want to change this in a child theme. So I know you usually have to copy the original .js file into a folder in your child them and then add something to your child functions file also. this is beyond my common knowledge.
thanksHi!
Check with this code:
.header-scrolled .logo img { opacity: 0; } .header-scrolled .logo a { background-image: url("http: (Email address hidden if logged out) "); background-repeat: no-repeat; background-size: contain; background-position: top left; }It’s a different method but it achieves the same purpose, what do you think?
Cheers!
Josuethanks for trying Josue,
The last suggestion looked nice for the main logo swap to my icon on scroll down. But it doesn’t account for the swap on browser window ipad size. If I use the new code in combination with some of the old code then I end up with seeing two logos as one point. My brain is starting to hurt trying to figure it out. It seams I can the swap to look right when the browser window is shrunk down past 989 wide. And I can get the swap to look good with a larger browser window when simply scrolled down. But I cant get the shrinking of the logo on scroll down to time right when the browser window is below that tablet size and the swapped logo is visible.I am going to leave it the way it was. default logo shrink behavior on scroll down. And then my swap happens when window is smaller that 989. But when the latter is active and they then scroll down. the logo gets cut off until the header shrinks then it activates the logo shrink. The end result is good, but middle is bad. If you scroll down slow you see it. but I think if you scroll down normally and aren’t exactly looking at the logo it might not be noticed by people. Very un-elegant but i don’t know what else to do.
Hi!
Yeah i forgot about that, you could make it apply only to 989px or more:
@media only screen and (min-width: 989px) { .header-scrolled .logo img { opacity: 0; } .header-scrolled .logo a { background-image: url("http: (Email address hidden if logged out) "); background-repeat: no-repeat; background-size: contain; background-position: top left; } }Best regards,
JosueSorry if
I didn’t clarify, I did incorporate that in into the media query, but it still doesn’t work. the code you are providing does work. But it only does one of two things. It solves the scroll down logo change/shrink. perfect.but what it conflicts with is the other thing I do. On devices smaller than 989 I want to always display the icon version of the logo (on both unscrolled and scrolled headers) The normal large logo is too wide and it touches my nav links. So I hide the full logo and show the icon.
In the past the only thing I did was change the logo on the smaller browsers and the scaling header was never an issue. But with the last update it changed. The code you are providing is facilitating the scroll change, does nothing for always showing the icon on smaller screens. I can turn that on too, but then on small devices when you scroll up and down it is showing both background icons on top of each other.
Sorry it is hard for me to explain in words. what I want it to do seams simple enough, I just can’t explain it well. (infact when you visit my site now it works but the problem is just the cutoff) picture at the top of this thread. or visit the site and shrink you browser window left then scroll down to watch the problem.
Hi!
Can you please provide a screenshot of the issue on mobile device? It looks fine when I checked it. This is what it looks like:
Regards,
IsmaelMaybe it is more of a non-issue. I am just a bit of a perfectionist when it comes to functionality. There is no issue on iphone or ipad. As when you scroll down the header doesn’t shrink. It just either scrolls away or is sticky full size depending on the device. The only place it happens is on a variable browser screen like a computer like in the picture at the top. I would assume most people don’t display websites in a small window much anymore. Most probably view it full screen or close to it. But the people that do run smaller window are the ones that will see it.
Hey!
Yeah that’s not something to worry about to be honest, the only ones who do that are people testing their site responsiveness :)
Regards,
Josue
- The topic ‘new header styles – messed up my site – dang’ is closed to new replies.