[Resolved] Customize mobile header

[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/

[David]

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.

[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.

[Elvin]

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;
}

[Janne]

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

[David]

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.

[Janne]

Hi.
Took some time, but now tested it.
It works fine, added a div to only show the subscribe link on mobile. But the text is a bit to large, bold and all capital letters. Can’t find out where this code comes from. Can you please help me find out whats going on?

Subscribe

Still working on this page: https://joyofmotioncrochet.com/

[Ying]

Hi Janne,

The menu bar items hook link inherits the font setting for Primary menu items you set in customizer > typography.

You can use this custom selector .menu-bar-items ato override its font weight.

Please watch the video, from 3:30 it demonstrated how to use the custom selector in our typography system:
https://docs.generatepress.com/article/dynamic-typography-overview/

[Janne]

Thank you, haven’t activated the new system for fonts, so used custom css

[Ying]

No problem 🙂

[Author]

Posts