[Resolved] header css classes

[Tim]

I am trying to make a header to match this comp: https://snipboard.io/7GyNZt.jpg
at this url: https://smiledesignersri.timthorp.com/
Using the current versions of GeneratePress and a child theme, plus the GP Premium plugin
So far, I have added a generate_after_logo hook and put in some html, but I don’t know what classes to use. I was looking in the documentation for a page that would enumerate the handy css classes that I could leverage. Does that exist?
I’m not concerned with colors yet, mainly just struggling with placement. Many thanks!
Here’s some html that is in the hook. Obviously, .top-hat isn’t in CSS

<div class="top-hat">
	Dr. Chris <br>
call us now
</div>

[Ying]

Hi Tim,

Can you try using generate_inside_navigation hook instead?

Then add this CSS:

.top-hat {
    width: 100%;
}

The text is using the top-hat CSS class 🙂

[Tim]

I can confirm that works, however, if I use generate_inside_navigation the text disappears in a mobile view and I would like it to be persist in both views.

[Ying]

You can try add this CSS as well:

@media (max-width: 768px) {
.top-hat {
    display: block !important;
}
}

[Tim]

Thanks, Ying!
Interesting to me that you are sending CSS. I thought that you might send something like this:

You could use our utility class called tophat which is already included in our CSS, but maybe it isn’t in your CSS. The GP landscape is big, so I’m still trying to figure it all out.

Thanks again.

Tim

[Ying]

The best tool to figure out the classes an element has is to use developer tool 🙂
https://developer.chrome.com/docs/devtools/

We can’t remember all the classes as well.

[Author]

Posts