Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 2, 2014 at 6:43 pm #273420
    Kevin

    Hello Support,

    Is it possible to have the “Header Social Icons” which is currently on top of the logo with the pink color bar to be positioned below “Draw Outside The Lines” image.

    We want the image text “DRAW OUTSIDE THE LINES” to be part of the “Sticky Header”.

    URL is: http://shelliv.bydecosta.com/

    Please let me know what can be done to achieve what we are trying to do for the client.

    Thank you,
    MP

    June 2, 2014 at 6:57 pm #273439
    Kevin

    Sorry, we just want the “Draw Outside The Lines” text to be part of the “Sticky Header”.

    The way we have the social Icons on the top is right.

    Thanks,
    MP

    June 2, 2014 at 11:44 pm #273603
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #av_section_1 {
    position: fixed;
    z-index: 1000;
    top: 40px;
    background: transparent;
    border: 0;
}

    I’d recommend you to set an unique ID to that section and change the CSS accordingly.

    Cheers! 
    Josue

    June 3, 2014 at 7:26 am #273749
    Kevin

    Thanks Josue,

    With the info you provided I was able to make Section_1 & 2 be part of the sticky header.
    How can I make the Navigation text aligns to the Logo Title. Also when I view the site on the ipad/iphone what can I do to make it look perfect.

    #av_section_1 {
    position: fixed;
    z-index: 1000;
    top: 130px;
    background: transparent;
    border: 0;
    }
    #av_section_2 {
    position: fixed;
    z-index: 1000;
    top: 184px;
    background: transparent;
    border: 0;
    }

    Thanks again for the awesome support.

    Thanks,
    MP

    June 3, 2014 at 12:05 pm #273822
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .logo img { margin-top: 25px; }

    and add media queries to your existing code as following

    @media only screen and (min-width: 768px) {
#av_section_1 {
position: fixed;
z-index: 1000;
top: 130px;
background: transparent;
border: 0;
}
#av_section_2 {
position: fixed;
z-index: 1000;
top: 184px;
background: transparent;
border: 0;
}
}

    Regards,
    Yigit

    June 3, 2014 at 2:06 pm #273883
    Kevin

    Perfect now its working on the ipad and iphone.

    Only issue now is on the regular browsers when viewed on the PC or MAC The Logo and Navigation are too low and there is too much of white space above. I need to reduce the height above. Also on the regular browser I see the navigation but I can’t click on it, I need to put for eg: my mouse on top of above “About Shelli” to be click able.

    Thanks,
    MP

    June 3, 2014 at 2:38 pm #273892
    Kevin

    I actually added the following on the CSS which should work fine.
    .av-main-nav > li > a {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-top: -20px;
    padding: 0 13px;
    text-decoration: none;
    transition: background-color 0.4s ease-in-out 0s, color 0.4s ease-in-out 0s;
    }

    June 3, 2014 at 2:43 pm #273894
    Kevin

    One last thing sorry.

    What can I do to make the single posts look like the pages.
    http://shelliv.bydecosta.com/peanut-meets-the-pigtailed-firefighter/

    On the Single Post, the “Draw Outside the Lines” and the pink line is not showing.

    Thank you,
    MP

    June 3, 2014 at 4:44 pm #273982
    Yigit

    Hey!

    It may be better if you add image to header as i instructed here – https://kriesi.at/support/topic/anchor-drow-otuside-the-lines-and-color-bar-to-the-header/#post-273534 so it will be visible on all of your pages

    Cheers!
    Yigit

    June 6, 2014 at 6:56 am #275466
    Kevin

    Thanks for all the help

    MP

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Doing updates to the Sticky Header’ is closed to new replies.