Shop Categories

X

Header backrgound

Home Forums Agama Pro Header backrgound

Topic Resolution: Resolved

Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #3784
    brillianttv
    Participant

    Hi,

    I’m trying to do two things and having issues:

    1. I’ve got a centred header logo. It shrinks down when you scroll the page, but it gets too small. In it’s small state, I found the CSS code for it and in preview mode on Firefox, increased the size using this:

    .logo {
    height: 110px
    }

    The only thing, this doesn’t work in production and I can’t see for the life of me why.

    2. I’ve put a gradiented CSS background on the header shrink, I want to do the same thing on all pages which don’t have a slider on them so that the header isn’t a plain boring white. I’ve applied the following code, again which doesn’t work. Please could you tell me why?

    header_v2 .sticky-header-shrink {
    background-image: linear-gradient(
    #8e44ad,
    #7d3c98,
    #6c3483,
    #ca6f1e);
    }

    Thanks in advance.

    #3790
    Jerry
    Keymaster

    Here are CSS code for shrinked header logo size:

    #masthead .sticky-header-shrink .logo {
        max-height: 62px !important; // Increase size per own needs.
    }

    Here is code for header v2 shrinked gradient:

    header.header_v2 .sticky-header-shrink {
    background-image: linear-gradient(
         #8e44ad,
         #7d3c98,
         #6c3483,
         #ca6f1e);
    }

    Best Regards

    • This reply was modified 5 years, 8 months ago by Jerry.
    #3809
    brillianttv
    Participant

    Hi Jerry,

    Thanks for this. Everything’s now working like a dream apart from the logo shrink, which still shrinks to the size of a pin head. This is what’s in my CSS manager now.

    Many thanks, Iain:

    /*This controls the small logo height*/
    #masthead .sticky-header-shrink .logo {
    max-height:192px !important; /*Increase size per own needs.*/
    }

    /*This is for the larger header gradient*/
    .header_v2 {
    background-image: linear-gradient(
    #8e44ad,
    #7d3c98,
    #6c3483,
    #ca6f1e);
    }

    /*This is for the smaller header shrink gradient*/
    .sticky-header-shrink {
    background-image: linear-gradient(
    #8e44ad,
    #7d3c98,
    #6c3483,
    #ca6f1e);
    }

    /*This is for the page gradient*/
    #page.site { background-image: linear-gradient(
    red,
    #8e44ad,
    #f06d06);
    }

    /*Makes text white for widget area*/
    .widget-area .widget a {
    color: #ffffff;
    }

    /*Makes text white for widget area*/
    .archive-title, .page-title, .widget-title, .entry-content th, .comment-content th {
    font-family: RaleWay;
    font-size: 11px;
    line-height: 2.181818182;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    }

    /*Makes text white for widget area*/
    .cat-item a {
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    #3832
    brillianttv
    Participant

    Any ideas on the above please Jerry and thank you.

    #3850
    Jerry
    Keymaster

    I’m preparing update for header logo shrink size, there will be new feature so you will be able to set max-height for shrinked logo.

    Regards

    #3885
    brillianttv
    Participant

    Hi,
    Cool thanks. I’ll wait for that to come out.
    Cheers.

    #6210
    brillianttv
    Participant

    Hi Jerry,

    Wonder if you could help me please?

    On http://timmymallettmirror.sykes-creative.co.uk/ – header is tranparent.

    Then when you scroll down, header becomes semi transparent.

    I want this to happen on all the pages.

    However on http://timmymallettmirror.sykes-creative.co.uk/timmy-towers/ all I get is a white background, although when you scroll down you to get the semi transparent background.

    I want the header on each page to be transparent until you begin scrolling.

    I’ve tried multiple ways with the css, but can’t seem to make it happen.

    Any ideas please?

    Many thanks :).

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.