Custom header code issue

[JacquiiDesigns]

Hey guys. There's a bit of an issue with a customized header I made for the Adara theme. If you can take a look at http://xenforo.jacquiidesigns.com

Spoiler: Screencap of header issues...

I hope you'll be able to help fix the issue(s) I have with the header styling. The first issue is the navigation menu jumps up. How can I prevent that? The 2nd issue may actually be dependent on the navmenu moving upwards. I'd like to make it so the header section stays the 169px length as the header background image.

The fix is likely a simple css code. I just don't know what code to add.
I'll appreciate any help. Thanks!

J.

 

[Russ]

Referring to when the floating navigation kicks in?

Style Properties: [XB] Header and Navigation -> Header Float Variable

Also remove the mobile logo path:

Style Properties -> Header and Navigation as it's trying to call the mobile logo at a reduced height.

 

[JacquiiDesigns]

Ugh! Such simple changes. I'm not sure how I missed them - but it's yet another reason why I love the Adara theme so very much.
Cheers @Russ

J.

 

[JacquiiDesigns]

I changed:

#header {
    background-position: top center;
}

To:

#header {
    background-position: top left;
}

And added:

#headerMover #header {
    max-width: 1290px;
    margin: 0px auto;
}

In an effort to make the header background aligned to the left so that the logo stays on the light portion of the header design like so:

The entire header section shifts to the left though like:

@Russ -- Might you be able to suggest a css edit so that the header section stays centered like the entire pageContent area?
I'll appreciate your assistance.

J.

 

[Russ]

Can you target #logoBlock .pageContent instead of applying the background to #header?

 

[JacquiiDesigns]

Can you target #logoBlock .pageContent instead of applying the background to #header?

Wow for the quick response!
That did actually work nicely ... with one caveat though.
What I did was targetted #logoBlock .pageContent - changed the code to

#logoBlock .pageContent {
    background-image:url('@imagePath/xenforo/header.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: top left !important;
    margin: 0px auto !important;

There's about a 10px gap on either side of the header when the floating nav kicks in though:

 

[Russ]

I believe there's some padding in responsive mode by default.

.Responsive #logoBlock .pageWidth { padding: 0px !important; } would probably do the trick.

 

[JacquiiDesigns]

I believe there's some padding in responsive mode by default.

.Responsive #logoBlock .pageWidth { padding: 0px !important; } would probably do the trick.

That did it ... kinda. It left a slight gap.
I edited the actual code in navigation.css to padding: 0px and voila = Issue fixed.
I very much appreciate your help Russ. Thanks a lot!

J.