Trouble with logo overhang and sticky header; and FAQ

This topic has 8 replies, 3 voices, and was last updated 8 years ago ago by Eva Kemp

  • 7 Answers
    Avatar: Robert Hall
    Robert Hall
    Support staff
    September 27, 2016 at 07:27

    Hello,

    1) Sorry, but your query is unclear.
    Please show a screenshot of the issue and what you want to achieve.

    2) I’ve added this code in Global Custom CSS. Please check.

    .ult_tabs .ult_tabcontent{
        height:auto !important;
    }

    Regards,
    Robert Hall

    Avatar: pblasio
    pblasio
    Participant
    October 12, 2016 at 16:39

    1. Sorry, I meant to provide that information. Please see links to the homepage default view that shows the header in its default state, and the header as a sticky header when the user scrolls down.

    DEFAULT VIEW:
    http://www.st48.com/demofbf/wp-content/uploads/2016/10/FBF-Homepage.jpg

    FIXED/STICKY HEADER VIEW:
    http://www.st48.com/demofbf/wp-content/uploads/2016/10/FBF-fixed-header.jpg

    Please advise. Thank you. Theresa

    Avatar: Robert Hall
    Robert Hall
    Support staff
    October 12, 2016 at 16:45

    Hello,

    Sorry, but I can’t understand what exactly you want to fix there. Do you want the transparent background in default and fixed header?

    Regards,
    Robert Hall

    Avatar: pblasio
    pblasio
    Participant
    October 12, 2016 at 20:20

    A few things going on there:

    1. the header should be slightly transparent
    2. The masthead image (farm) that is currently displaying under the header bar should be layered beneath the header.
    2. the scalloped fluffy bottom farms logo should hang over….about the last 1/4 of the logo should sort of stick out a little.

    You can see it better when you look at the sticky header example where we show the user has scrolled down the page.

    LMK if you need more information. I really appreciate your assistance. T

    Avatar: Robert Hall
    Robert Hall
    Support staff
    October 12, 2016 at 20:46

    Hello,

    I’ve added the following code in 8theme Options->Styling->Custom CSS->Global Custom CSS. Please check.

    .home .header-type-3 .header {
        background-color: rgba(255,255,255, 0.9);
        height: 110px;
    }
    .navbar {
        padding: 10px 0;
    }
    .home .header-type-3 .header .menu-wrapper {
        display: inline-block;
        padding-top: 20px;
    }
    .fixNav-enabled .fixed-active .header-wrapper {
        background-color: transparent;
    }

    Regards,
    Robert Hall

    Avatar: pblasio
    pblasio
    Participant
    October 31, 2016 at 18:35

    Yes! Thank you that solved the problem in the desktop view. In the mobile view – the logo looks like it gets stuck behind the masthead image. if you squeeze the page down to mobile view, you’ll see it right away.

    Thank you and please advise. Thanks, Theresa

    Avatar: Eva
    Eva Kemp
    Support staff
    October 31, 2016 at 18:46

    Hello,

    Please add this code in Custom CSS for mobile section:

    .template-container .header-logo {
       z-index: 1;
    }

    Regards,
    Eva Kemp.

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.