[Resolved] Add Copyright Note to Header

Home Forums Support Add Copyright Note to Header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #971445
    Max

    Hi there!

    I am using the latest version of GP Premium.

    What I would like to do:

    In my header I intend to use different images which will be changed over time. That makes it necessary for me to display a copyright note. So far I have not found any way to do this via the built-in features of GP. Furthermore I am using a specific header – see: https://generatepress.com/forums/topic/creating-specific-header/

    For mobile view, since the size of the header image does not change, it would be possible to add a fixed line right above the white space, so at the bottom of the header. I would need to be able to style it via CSS though.
    The desktop version might be more tricky since the header image’s size changes depending on the size of the browser window.
    Theoretically it could be displayed at a fixed point, e.g. in the lower right corner of the header, right above the semi-transparent gray bar, so directly above the magnifying glass icon.

    Another idea would be to add a clickable copyright icon which would be fixed at said points. On mouse over or click it would open and display the copyright note.

    I think the latter version would be more complicated but as I know close to nothing about php I cannot really say for sure.

    I would be glad about any feasible suggestion.

    Best wishes

    #971535
    David
    Staff
    Customer Support

    Hi there,

    Maybe try this, edit your header element and below the HTML Comment add this:

    <div class="copyright-container">
        <div class="grid-container">
            Your copyright info goes here
        </div>
    </div>

    Then edit this piece of CSS to include the position: relative; property:

    @media (min-width: 768px) {
        .main-navigation {
            margin-top: -43px;
            /* Adjust this number to match the height of the navigation */
            position: relative;
        }
    }

    Then add this CSS to position and style the copyright text for desktop and mobile:

    .page-hero {
        position: relative;
    }
    
    .copyright-container {
        position: absolute;
        display: block;
        left: 0;
        right: 0;
        bottom: 5px;
        color: #fff;
        font-size: 12px;
        padding: 0;
    }
    
    @media (min-width: 768px) {
        .copyright-container {
            bottom: 45px;
            padding: 0 40px;
        }
        .copyright-container .grid-container {
            text-align: right;
        }
    
    }
    #972414
    Max

    Hi David,

    I used the code and adjusted it and changed the values a bit. On mobile the container was centered – now it is aligned to the right as well. That means so far the code works fine!

    There is just one problem: The semi-transparent effect of the gray bar (menu area) is gone. The top bar is still semi-transparent though. Do you have an idea what might be causing this?

    #972467
    David
    Staff
    Customer Support

    The code you have that looks like this is broken:

    @media (min-width: 768px) {
        .main-navigation {
            margin-top: -43px;
            /* Adjust this number to match the height of the navigation */
            position: relative;
        }
    }

    The comment is causing the problem – just swap it for this:

    @media (min-width: 768px) {
        .main-navigation {
            margin-top: -43px;
            position: relative;
        }
    }

    You will need to adjust the copyright position again.

    #972471
    Max

    That did the trick.
    Thank you for the quick solution David!

    #972482
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.