[Resolved] customize header

Home Forums Support customize header

  • This topic has 9 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1006623
    Mika

    Hello

    I am using GP Premium plugin and child_theme.

    I am looking for way to load extra classes inside-header class.

    <header id="masthead" class="site-header" itemtype="https://schema.org/WPHeader" itemscope="">
    	<div class = "inside-header">
    	  <div class=""header-widget"> ... </div>
    	  <div class="site-branding"> ... </div>
    	  <div class="extra-class-from-child-theme"> ... </div>
    	  <div class="extra-class-from-child-theme-2"> ... </div>

    – in main theme, in folder inc/structure/header.php
    – There is function called generate_header_items();

    Q1: is there way to inject new item to function generate_header_items() array
    from child-theme?

    Q2: or is there way to make it via elements and hooks ?

    function generate_construct_header() {
    		?>
    		<header id="masthead" <?php generate_do_element_classes( 'header' ); ?> <?php        
                    generate_do_microdata( 'header' ); ?>>
    			<div <?php generate_do_element_classes( 'inside_header' ); ?>>
    				<?php
    				/**
    				 * generate_before_header_content hook.
    				 *
    				 * @since 0.1
    				 */
    				do_action( 'generate_before_header_content' );
    
    				// Add our main header items.
    				generate_header_items();
    
    if ( ! function_exists( 'generate_header_items' ) ) {
    	/**
    	 * Build the header contents.
    	 * Wrapping this into a function allows us to customize the order.
    	 *
    	 * @since 1.2.9.7
    	 */
    	function generate_header_items() {
    		$order = apply_filters( 'generate_header_items_order',
    			array(
    				'header-widget',
    				'site-branding',
    				'logo'
    
    -->                 <strong>'class-from-child-theme',
    -->                 'class-from-child-theme-2',</strong>
    
    			)
    		);

    Thanks Mika.

    #1006659
    David
    Staff
    Customer Support

    Hi there,

    you can use the Hook Element ( or add_action ) to insert content into the header.
    You can see the main hooks here:

    https://docs.generatepress.com/article/hooks-visual-guide/

    #1006703
    Mika

    ok, created new element:
    hook is setup “after_header_content”
    execute php enabled.
    priority 10.

    — it should be before navbar —-

    add_action( 'bottom_extra_element','bottom_extra_element' );  
    function bottom_extra_element() { ?> 
        <div class="before-nav">
    			<p>
    				Before navigation
    			</p>
    </div>
    <?php }

    now it killed totally my test page

    no content, no footer any more ;-(

    http://tuotantopalvelu.fi/testing-frontpage/

    #1006710
    David
    Staff
    Customer Support

    You don’t need to create the hook and function. Just ouput the HTML e.g

    <div class="before-nav">
    <!--- HTML -->
    </div>
    #1006743
    Mika

    Good.

    Now I am having next problem, my custom css is not loading.

     <div class="before-nav-bottom-header">
    			<p>
    		     <!--- HTML -->
                           huhuuu
    			</p>
    </div>
    
    .site-header .before-nav-bottom-header {
    background-color: #0072ce;
    
    }
    #1006877
    David
    Staff
    Customer Support

    How are you adding the CSS?
    It should go in child theme style sheet or customizer > Additional CSS.

    If you must add it to the Hook then it needs to be wrapped in <style> tags:

    <style>
    /* CSS styles here */
    </style>

    And you should add it before the HTML to stop flash of unstyled content.

    #1006907
    Mika

    css comes from child style.css.

    I have created two elements;

    Hook – which gives me location
    Header which contain content.

    I am half a way.

    Q: how to get my header content element to hook element location ?
    http://tuotantopalvelu.fi/testing-frontpage/

    #1006955
    Leo
    Staff
    Customer Support

    Like to move the navigation below the page hero?

    If so give this PHP snippet a shot:
    https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know 🙂

    #1008528
    Mika

    Thanks.

    I managed to fix page by creating hook and placed it “after_header_content”.
    reloaded “cache dynamic CSS” from customize -> general.

    Main problem was “how to put element correct position”

    Now text is in place.

    #1008792
    Leo
    Staff
    Customer Support

    Sorry I’m a little bit confused.

    Which element are you referring to?

    Is it on the home page?

    Where are you trying to place it?

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.