Archived topic

Add Copyright Note to Header

5 replies · Started by Max on July 30, 2019

Viewing posts 1–6 of 6

July 30, 2019 at 12:24 pm #971445

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

July 30, 2019 at 2:27 pm #971535

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

}

July 31, 2019 at 11:20 am #972414

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?

July 31, 2019 at 1:08 pm #972467

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.

July 31, 2019 at 1:14 pm #972471

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

July 31, 2019 at 1:28 pm #972482

Glad to be of help.

This archived topic is closed to new replies.

Start building better websites today.