JacquiiDesigns

Customer
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

cncmakerzone-screen.gif

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

Pixel Exit Staff
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

Customer
I changed:

Code:
#header {
    background-position: top center;
}
To:
Code:
#header {
    background-position: top left;
}
And added:
Code:
#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:
cnc1.png


The entire header section shifts to the left though like:
cnc2.png



@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.
 

JacquiiDesigns

Customer
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

Code:
#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:
cnc3.png
 

Russ

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

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

JacquiiDesigns

Customer
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.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.