[Support request] Customize mobile header

Home Forums Support [Support request] Customize mobile header

Home Forums Support Customize mobile header

  • This topic has 5 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2047782
    Janne

    Hi.
    I am trying to customize my mobile header to get the logo and a button in the middle and the menu button and search on each side.

    Now the logo is on one side and the search button in the middle and the menu on the other side.

    Are there any possibilities to do this?
    See todays look here: https://joyofmotioncrochet.com/
    And the look I want (a colleagues blog: https://www.nickishomemadecrafts.com/

    #2048010
    David
    Staff
    Customer Support

    Hi there,

    can you enable the Mobile Header and add a mobile header logo in Customizer > Layout > Header. Once thats in place ill provide some CSS for positioning.

    #2053465
    Janne

    Hi.
    Have now added a mobile header. Have also a sticky header, and want it to look the same when you swipe down the site on mobile.

    #2053993
    Elvin
    Staff
    Customer Support

    Hi there,

    Try adding this CSS:

    nav#mobile-header button.menu-toggle {
        order: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    nav#mobile-header .site-logo.mobile-header-logo {
        order: 1;
    }
    
    nav#mobile-header .menu-bar-items {
        order: 3;
    }
    
    nav#mobile-header .menu-bar-items .menu-bar-item > a {
        order: 3;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    nav#mobile-header.sticky-navigation-transition img.is-logo-image.entered.lazyloaded {
        height:54px;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2054247
    Janne

    Thank you, it worked.
    Is it possible to get a link in the header, that say for example “subscribe”?

    #2054390
    David
    Staff
    Customer Support

    You can use a Block Element ( or Hook Element ):

    https://docs.generatepress.com/article/block-element-overview/

    Add you button or html for the link.
    Select the menu_bar_items hook
    And set the Display Rules to the Entire Site.

    This will place it beside the burger menu.

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