[Resolved] Add short divider line in Page Header

Home Forums Support [Resolved] Add short divider line in Page Header

Home Forums Support Add short divider line in Page Header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #593710
    Jhorene

    Hi guys,

    I’m new to Generate Press and I must say I’m loving working with Generate Press and Elemnentor.

    I would like to add a short 10% divider line below my page header title e.g.
    CONTACT US
    ____

    I have this in my page header at the moment, <h1>{{post_title}}</h1> – can you pleae help me to add the divider line below the page title?

    Thank you in advance.

    Regards,
    Jhorene

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #593809
    David
    Staff
    Customer Support

    Hi there, you can try using a pseudo element like so:

    .generate-inside-page-header-content h1 {
    	position: relative;	
    	display: inline;
    }
    .generate-inside-page-header-content h1:after {
    	content: '';
    	width: 50%;
    	position: absolute;
    	left: 0;
    	bottom: -10px;
    	border-bottom: 3px solid black;
    	-webkit-transform: translate3d(50%,0,0);
    	transform: translate3d(50%,0,0);    
    }
    #593875
    Jhorene

    Hi David,

    Thank you for the quick reply. That is working great!

    My only last question is how to center align it? It’s currently showing up left aligned with the text, instead of center aligned.

    Regards,
    Jhorene

    #593887
    David
    Staff
    Customer Support

    I have updated the code above for center alignment.

    #593964
    Jhorene

    Hi David,

    That worked a charm!

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