Custom header in search page

  • Hi everyone,

    I have created a header for the home pages and other pages. (transparent and white text)

    I then created a custom header (Theme panel / MyLibrary) to be able to put it on specific pages. (white background and black text).

    I notice now that the page that shows the search results automatically takes the first header. The page is white and the white text is not visible.
    I would like to insert my custom header.

    In the file search.php (Appearence / Theme editor) there is this section:
    <?php
    /**
    * The template for displaying Search Results pages.
    *
    * @package OceanWP WordPress theme
    */
    get_header(); ?>

    I should use the get_header() function to select my custom header, but I don’t know how to do it.
    The theme didn’t create a .php file with the name of my custom header
    How do I do that?
    thanks

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hello,

    Kindly share the website URL where you facing the issue.
    Following the doc may help you with it.
    https://docs.oceanwp.org/article/375-altering-header-style-by-page

    Thread Starter stefanopoma97

    (@stefanopoma97)

    `Hello,

    Kindly share the website URL where you facing the issue.
    Following the doc may help you with it.
    https://docs.oceanwp.org/article/375-altering-header-style-by-page`

    `hi.
    I have solved almost completely

    the text is now black and only in the home page I make it white.
    But I can not in any way change the color of the Hamburger icon.

    Following the documentation: https://docs.oceanwp.org/article/224-alter-the-bars-icon-in-the-mobile-menu-link

    function my_mobile_menu_open_button_icon( $return ) {
    if ( is_page(‘home2’) ) {
    return ‘<i class=”fa fa-bars” style=”color:white”></i>’;
    }
    else{
    return ‘<i class=”fa fa-bars”></i>’;
    }

    }
    add_filter( ‘ocean_mobile_menu_navbar_open_icon’, ‘my_mobile_menu_open_button_icon’ );

    this way I should change the icon color only if I’m in the ‘home2’ page. Unfortunately, nothing happens.

    the site is not online yet

    Thread Starter stefanopoma97

    (@stefanopoma97)

    Basically I should figure out how to change the color of the icon in CSS.
    Once I find id or class of the icon I can try to apply the new color only on the home page.

    The body of the homepage has a unique id then:
    .page-id-854 .hamburger_icon_id {
    color:’white’}
    (something like this)

    until now i couldn’t find the id of this icon and the way to change its color.

    It would be ok to put a background color and keep the icon color unchanged (alternative solution)

    Thread Starter stefanopoma97

    (@stefanopoma97)

    OK, I solved it.
    Here is the solution.

    The default color of the hamburger icon is set in Header/Mobile Menu/Custom Hamburger Button: Color

    The color will then be used throughout the site.

    To change it in a specific page you have to retrieve the page id: just check in the <body> of the page from a browser, you will find something like “.page-id-854”.

    To change the color now you have to go to: Custom Css/Js and write:

    .page-id-854 .mobile-menu .hamburger-inner,.page-id-854 .mobile-menu .hamburger-inner::before,.page-id-854 .mobile-menu .hamburger-inner::after {
    background-color: #ffffff !important;
    }

    Without “!important” it doesn’t work
    It doesn’t work even if you put it in style.css of child theme

    Translated with https://www.DeepL.com/Translator (free version)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom header in search page’ is closed to new replies.