Site logo

Archived topic

Header

9 replies · Started by James on September 26, 2021

Viewing posts 1–10 of 10

I have GerneratePress premium and I am trying to customize the header area.
https://yoursecretself.com/

What's the best way to create a header or customer header?

I have tried to edit the text but it appears I am limited with ( Functionality )

I can not center the Title or Taglines and I can not edit the space between them.

Hi James,

I believe this is a good opportunity for you to use GP Premium's Block Element - Site Header.

When you create a Block Element on Appearance > Elements. It lets you set the type/purpose of Block Element you're creating.

On this screenshot - https://share.getcloudapp.com/qGuJWRem - it shows a dropdown option of the type of Block ELement you're creating.

For this specific purpose, pick "Site Header".

Layout created on a Block Element - Site Header replaces the default header of the theme.

That said, create your desired layout that will serve your site's header.

After you're done with the layout, go to its Display Rule tab and set its location to you where you want the layout to apply.

After you're done w/ the layout and display rule location settings, save the Block element.

You should see the layout you've created applied on the front end. :)

Ok great! So now how can i get rid of the default navigation area with the Site Title and Tagline completely.. the white area. https://yoursecretself.com/

Will this be for images added as an image block within your content?

If so, add this CSS on your site:

.frame {
    -webkit-box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
}

And then add frame on the Additional CSS Class(es) field of the image blocks you want to have shadow effect.

So can you make a quick video explaining this.. I am a bit confused.

Here's a demo video - https://share.getcloudapp.com/WnukzXlJ

You can use this CSS instead if you wish to apply it on the image bounds only.

.frame img{
    -webkit-box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
}

Is the original topic resolved?

If so please open a new topic for a separate question.

Thanks!

This archived topic is closed to new replies.