Jumping Header


Author Message
Unglood

Posted: 4/13/2013
Quote message 

Jumping headers is the topic.

http://cannonbeachlive.com/tide-tables/ is the page.

Jumping nav bars seems to have been addressed in the forums by (thank you abland) max-width. I have tried max-width on the header above. No happy!

The site is "pure" 4.1

I guess I should have read betwixt the lines first and, instead of having two header images - as in link above - only have made 1 header image extending the full width of the body.

Is that how I can correct this, by making 1 full-width image?

Thank you.


 
Abland

Posted: 4/13/2013
Quote message 

Hi, Unglood,

I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert.

In sidebar-header.php find:
<div class="cbl-shapes">

<div class="cbl-object1295549866" data-left="87.84%"></div>
<div class="cbl-object1760427099" data-left="0.18%"></div>
</div>

Add a custom id to each object: (you can have more objects, too)
<div class="cbl-shapes">

<div id="custom-item-1" class="cbl-object1295549866" data-left="87.84%"></div>
<div id="custom-item-2" class="cbl-object1760427099" data-left="0.18%"></div>
</div>

In header.php add a custom id to the body tag:
<body <?php body_class(); ?> id="custom-item">

Add the following to your style.css:
#custom-item .cbl-shapes {

position: relative;
display: block;
height: 100%;
margin: 0 auto;
overflow: visible !important;
}
/*establishes midpoint of all shapes and items*/
#custom-item #custom-item-1,
#custom-item #custom-item-1 {
left: 50% !important;
right: auto;
}
/*these are here in case they're used*/
#custom-item .cbl-headline {
left: 50% !important;
right: auto;
}
#custom-item .cbl-slogan {
left: 50% !important;
right: auto;
}

Then in style.css adjust the placement with margin-left. Negative margins go left of center. Adjust each margin to your own placement:
#custom-item .cbl-shapes {

width: 1120px; /*your site width*/
}
#custom-item #custom-item-1 {
margin-left: -500px;
}
#custom-item #custom-item-2 {
margin-left: 200px;
}
#custom-item .cbl-headline {
margin-left: -500px;
}
#custom-item .cbl-slogan {
margin-left: -500px;
}

This second batch of styles are to customize to your site. Now that it's fixed with a width and relative it doesn't jump on load.
 
Unglood

Posted: 4/13/2013
Quote message 

Quote Abland:

I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert.
---------
This second batch of styles are to customize to your site. Now that it's fixed with a width and relative it doesn't jump on load.


Abland. Thank you. I knew i'd have to come to grips with your previous detailed explanations. I'm sure they are spot on. I was just trying to easily circumvent additional coding - in case it bit me in the future!

to paraphrase an old joke "....Abland gave me my Relatives, thank heaven I can choose my friends"

Thank you. I'll let you know...
 
Unglood

Posted: 4/14/2013
Quote message 

Quote Abland:


I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert........



Abland you are a wizard. Thank you much. This works better than requested due to the now available pixel positioning. You must exceed your customer expectations. (How do you do that with XP & IE 7/8!!)

2 comments:

1) I'm thinking you meant this:

/*establishes midpoint of all shapes and items*/
#custom-item #custom-item-1,
#custom-item #custom-item-2 {
left: 50% !important;
right: auto;
}

instead of this:

/*establishes midpoint of all shapes and items*/
#custom-item #custom-item-1,
#custom-item #custom-item-1 {
left: 50% !important;
right: auto;
}

and,

2) in your honor, my custom-item id is named #ablanded

Thanks.

 
Unglood

Posted: 4/18/2013
Quote message 

Quote Abland:

I set all my themes with widths and relative position to correct the jumps. The following just targets the elements but doesn't change the original rules in case you want to revert.


There's no way this fix for the Header jumping could have affected the Footer moving from "Outside" to "Inside" the Sheet - is there?

just askin'!
 
Abland

Posted: 4/19/2013
Quote message 

Hi, Unglood,

Hey, thanks for the honorary id :-)

It wouldn't affect the footer - but you are missing a closing div, so in footer.php find:
<footer class="cbl-footer">

and add a closing div:
</div>

<footer class="cbl-footer">

 
Unglood

Posted: 4/19/2013
Quote message 

Quote Abland:

you are missing a closing div, so in footer.php find:
<footer class="cbl-footer">



Thanks much - again - Abland.

Next time i'm gonna have to rename my art-styles to abl-styles 8-)
 
Unglood

Posted: 5/8/2013
Quote message 

I give in. Uncle. Enough time on detail is enough...

The .slogan has me beat. Probably 6 hours i've spent trying to stop a .slogan from jumping around in the Header here: http://northcoastcomputers.com

I've sedder up like Abland's solution above and the .slogan does not behave like the objects.

I've messed with the sidebar-header code, the style sheet code, the numerous left's, margin-left's, absolutes, relatives, percentages and pixels and I give-in.

What on god's green earth do i have to do to stop the .slogan jumping?

How hard can it be?

(And, as an aside, I have now "solidified" some ideas about how i feel on the on the "would you pay $700 for Artisteer" topic that's out there somewhere.)

 
Abland

Posted: 5/8/2013
Quote message 

Hi, Unglood,
#ablanded .ncc-slogan { 

left: 50% !important;
right: auto;
margin-left: -550px px !important;
}

Adjust the margin to what you need.
 
Abland

Posted: 5/8/2013
Quote message 

And don't use the extra px in margin-left O:)
 
Unglood

Posted: 5/8/2013
Quote message 

lol. easy for you Abland! I don't know where you are or what you do with your days but.... thanks for all your help. truly appreciated.

what was the difference in the coding? Was it the !important after the margin- left ?

I feel like such an ... an... an... imbecile! I think i'm going to look for another job now. Would you like fries with that!!
 
Debayne

Posted: 7/8/2014
Quote message 

Sorry to drag up an old post but is there a way to do this and keep the site responsive?

Basically my client wants header items lined up perfectly with the main body elements on normal and widescreen which has been a challenge, but now header element jump is an issue.

I tried the above and although it works, the items no longer line up on all screen ratios :-X

Thanks in advance
 
Anna-Lena

Posted: 1/3/2017
Quote message 

Did everyhting... The sh*t is still jumping.
 
ScottN

Posted: 1/29/2017
Quote message 

Yep, headers and menus jumping around on each page load -- a real mess in Artisteer. I guess it's no longer a supported product, which is a shame.