[Resolved] Add Copyright Note to Header

[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

[David]

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;
    }

}

[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?

[David]

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.

[Max]

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

[David]

Glad to be of help.

[Author]

Posts