Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter tecombs

    (@tecombs)

    Just so you know, I’ve tried a number of CSS tricks to get things to cooperate and was successful only at making the Search box disappear. The oddest I’ve ever seen is that the header grows twice its height when sticky. Funky.

    Here’s my code:
    .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed .main-navigation{float:center; margin-top:15px; margin-left:150px;} .myfixed .hd-search{position: absolute; height: 0; width: 0; overflow: hidden; visibility: hidden;} .myfixed{height:100px!important;} .myfixed .header-img{transform:0.68;}

    Thread Starter tecombs

    (@tecombs)

    I corrected my mistake in the last bit of CSS to .myfixed .header_image{transform:scale(.68)} and got it to resize just right. Now to move it down some with margin-top, I’ve tried every size 1px to 125px and even negative values but I still have an immensely header height (2x)rather than the 45px I’d like to stuff everything in.

    Thread Starter tecombs

    (@tecombs)

    I’ve almost got it. Honest I’ve worked hours on this and I’m really stuck.

    These are all of my settings, many aided by Firefox’s “Inspect Element.”

    .myfixed { margin:0 auto!important; float:none!important; border:0px!important; background:none!important; max-width:100%!important; } .myfixed .main-navigation{margin-top:15px; margin-left:150px;} .myfixed .hd-search{position: absolute; height: 0; width: 0; overflow: hidden; visibility: hidden;} .myfixed{height:100px!important;} .myfixed .header_image {transform:scale(0.68); margin-top:-40px;} .myfixed .main-navigation ul li {width:135px;} .myfixed .main-navigation{margin-left:234px; margin-top: -117px;} .myfixed .wrapfixed{height:45px; position:static; top:-100px; width:100%;}

    Using Inspect Element I can get the fixed, sticky version to appear properly with a height of 45px. The class “.wrapfixed” is the class to which I made that change for height, but when I put it into myfixed css class it would not take.

    WHY!!!!???? Argh.

    Is there yet some super secret class that is hidden even from Inspect Element?

    Your help welcome and appreciated.

    Consternated in California,
    TECombs, DMD

    Thread Starter tecombs

    (@tecombs)

    I was right! I was right!

    It is a super-secret class that the javascript writes only when the header is sticky/stuck. And its name is: “.wrapfixed.”

    I tried writing height:45px; into the .myfixed css class with the other values but it wouldn’t take.

    So I guess I have to wait for you to get back on the clock Monday.

    Please advise.

    TIA.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘swapping header images when sticky’ is closed to new replies.