Urgent Help Req/Quote if necessary. Having Header issues for Parallax Pro site.

[SamLindner]

Hi all,

I have posted several questions before and last couple have not really received much feedback, so have to change tack here. I have an urgent fix that I need help on. If an quick outline of suggestions are not possible to fix it from a quick look at the CSS, then please send me a private message with a quote estimate on how long and how much you would quote to get it done. I need it fixed in the next few hours though.

I have tried to follow various other threads on creating a full width header image, however I can't seem to get away from these errors, so I think its something I have changed prior to trying to add the full width header image.

The Problems:
I am trying to add a full width header image to the site, however am having the following issues when uploading the full image - 1600x250 (bottom 100px is predominantly transparent):

- My primary nav disappears behind incorrect margins/dimensions somewhere in the CSS
- The header image does not re-scale down correctly when reducing browser window size - it does not scale right to the edge like being a true 100% width.
- There is a gap between the nav/header/widget area 1 (widget area 1 seems to have pushed right up) when reducing the browser window size and also on mobile of course as a result.
- All this of course effects the mobile site too, with everything being out of whack on there too.

So as mentioned, if I can't get a response from anyone that might be able to help by quickly seeing obvious problems in the CSS then please send a private message with a quote to fix ASAP.

http://www.mayanhealing.com.au

I will be trying to tinker with it at the moment as I try to fix it myself, so I can't guarantee that it will all remain the same over the next hour.

Thanks

http://www.mayanhealing.com.au

[David Chu]

Hi!
Quick freebie for you.... with these hipster fixed headers that the whole world wants these days, you often need to account for the lost space that "fixing" the header does. Here's a way to show your menu... you re-add space to the top of the remaining content below the header. I've increased the top margin. Adjust to taste. You can actually see more of the "ladies" image if you bump it up even more, but that will give a gap in there.

As for the top image scaling, to me it looks like it's doing pretty much OK. Those are usually a matter of taste, and for those who are selective (aka picky), they may need to have different versions of the top image at responsive breakpoints. 🙂

.parallax-home .site-inner {
   margin-top: 250px;
   max-width: 100%;
}

Cheers,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[SamLindner]

Thanks David, however it doesn't seem to have updated anything. I can't seem to see the nav still and it hasn't pushed down widget 1 content. Just to be clear, I am not seeing the nav on the fully extended normal size browser window.

I've added it to the custom CSS but it's still not working? Any idea?

Thanks
Sam

[David Chu]

Your new code is not active. Don't forget that with the dreaded Total Cache on there, you may have to clean that every time you make a change.

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[SamLindner]

Hi David, I've cleared all that several times and it still doesn't update unfortunately.

[David Chu]

Menu is now visible! So you're all set with that, and can adjust to taste. Probably just your browser cache isn't cleared. Testing a site with Total Cache on is never fun at all. And yes, I can see that your new code is cached. 🙂

I overstated the suggested top margin, maybe try 220 instead of 250.

Good luck,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[SamLindner]

Hi David,

I have now disabled Total Cache while I try to sort out this mess. Yes I can see the Nav again now (however responsive nav on mobile has completely gone)

However there are still formatting issues that I can not seem to resolve.

- I want the nav to move up closer to the header and in fact position itself in the bottom black part of the header so that the header and nav look as one.
- want to move the widget area 1 down further so that it appears in line better and not under the nav/in the space above the nav.
- so just want to squish that top part up a little more as it is way out of whack at the moment.
- Need to ensure that the nav and header are showing correctly on all other pages - as nav is not showing at the moment
- Ensure mobile nav returns and formatting looks correct.

So as you can see a bit to do yet, hence why I am looking to pay a developer just to finish this all off.....as I am completely lost now, I can not get anything to align/show as I want it....maybe it's just too late in the night (wee hours of the morning here) and I am just to frustrated to see the problem!

So if anyone is reading this post......I will PAY to get it done by someone, someone just needs to put up their hand!

Thanks

[emasai]

You will need to add your navigation into the header. For the moment it is after the header. In functions file add the following snippet.

/** Move navigation into header
 Remove the Primary Navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action('genesis_header', 'genesis_do_nav');

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[David Chu]

Sam,
Lynne's idea seems to have worked great. 🙂

A lot of issues, though, with various screen sizes and so on. If you'd like to have me work on it, follow the link to my site, click Contact, and provide any additional details if needed, and we can discuss that.

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[SamLindner]

Thanks Lynne,

I implemented that but still having a few formatting issues.

- Seem to have to Primary Navs for some reason? Know how to get rid of the second one?
- Also trying to get the header image to appear right across the page on all browser sizes, for some reason it has formatted to the left now.

Thanks

[emasai]

I suggest you contact Dave who has offered to work on it. As he says, there are other issues for mobile which require attention and you have double css declarations.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[SamLindner]

This reply has been marked as private.

[emasai]

The private reply is only visible to the original poster. Nobody else can see what you wrote, so if you are trying to contact someone do it through their website.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[SamLindner]

Typically I hired someone to do the job for me and they were not able to execute it as they said their internet "went down" right when they were half way through and now offline! I wasn't able to get the updated changes they made before they went offline as I was on the phone. Now when I go in there are a bunch of changes made to the stylesheet despite instructing to use the custom CSS instead to document the changes!

So I am left with a header and nav that no longer are responsive to a changing browser size - they just disappear.

Plus, the mobile responsive nav is non existent now too. Also wanted a simple mobile header with just a 100x100 (responsive) logo on black strip alongside the nav icon.

The main nav I just simply want to sit flush on the header so that there is no big black space.

Not sure if anyone else can see quickly what is possibly changing this? I had the nav in the header, now the person positioned it in the site-title-area instead I think!

I am reluctant to pay again for a task that an experienced developer should be able to spot in a few minutes looking at it, so giving it a try again here.

Thanks

[Author]

Posts