[Support request] Mobile header

[Pare]

Hi, I would like to adjust my mobile header,

The height is too small when resized, how can I adjust this height ?
On mobile preview I would like also to hide the text ‘menu’ aside to the hamburger menu.
Last thing how i can display my own hamburger menu design on web page and mobile version instead of the small hamburger menu proposed ?

Thank’s in advance

[Leo]

Hi there,

For mobile header height, try this: https://generatepress.com/forums/topic/changing-mobile-header-size/#post-263018

To hide the text Menu, try this CSS:

.main-navigation .mobile-menu {
    display: none;
}

To change the mobile menu icon, try this CSS:

.main-navigation .menu-toggle:before {
    content: url(URL HERE);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Pare]

Hi, thank’s for you help !

Is there a way to center the hamburger icon in height ? it is by default to bottom of header.

I needed to know how to show hamburger menu on desktop version as well,
any idead how to do his ?

Last thing, when I hide the menu bar in desktop version, it hides also in mobile,
since I only want to keep the hamburger at all times, how can I hide menu on desktop while keep displaying the hamburger icon ?

Thank’s again for your help

[Leo]

Can you provide a link to your site?

As for slideout navigation on desktop:
https://docs.generatepress.com/article/activating-slide-out-navigation/

Make sure you selected a menu:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

[Pare]

Hello, Thank’s for help,
my site is in maintenance mode (elementor)
do you want me to share you the access in private ?
what is your email ?

Thank you

[Leo]

Did the solution for the slide-out menu didn’t work for you?

You can provide a link and access through Account Issue here: https://generatepress.com/contact/

[Pare]

Hello, i sent the account details to Tom Usborne in contact field and received email answer today.
Awaiting for answer.

Thank you !

[Leo]

Hi there,

You can change the header background color in Customizer > Colors > Header > Background.

As for slideout menu on desktop only, try this: https://generatepress.com/forums/topic/using-only-the-slideout-menu/#post-223986

[Pare]

Ok, thank you
Works for background color, i’ll test slideout menu later.

How can i center hamburger icon in height and aligh right on mobile menu please ?

Thank’s again.

[Leo]

Try the mobile header: https://docs.generatepress.com/article/mobile-header/

The mobile header logo should be small like an icon.

If you don’t have a smaller logo you can use, add it anyways and we can make it look better with some CSS.

[Pare]

Hi Leo,
I can’t manage to adjust the hamburger icon on desktop. it is very small, shot example here :
https://www.dropbox.com/s/wrisr0jcd7lqsy8/Actual.png?dl=0

I would like instead to be replaced with a linked file, more big and aligned right like this :
https://www.dropbox.com/s/okryl3gmtximfvw/Desired.png?dl=0

How can I align it right and link as a file in the css editor ?
(I’d like to do the same with the ‘X’ button)

In mobile mode with your advice I was able to adjust the hamburger icon more bigger, but for the ‘X’ i didn’t found by myself.
Thank you

[Tom]

Any chance you can re-send your URL? I’ll take a look for you 🙂

[Pare]

Yes it’s that page : http://divines.ca/accueil-2/
Thank you

[Leo]

Hmm try adding your logo in Site Identity then set the navigation location to float right instead of in the menu:
https://docs.generatepress.com/article/navigation-location/

Then you should be able to adjust the size using menu height:
https://docs.generatepress.com/article/menu-item-height-width/

Then try some CSS like this:

@media (min-width: 769px) {
    .sf-menu>li.slideout-toggle {
        position: absolute;
        right: 0;
        padding-top: 100px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Pare]

Ok doing that made disapear my logo completely on desktop mode. it’s shows on mobile mode.
Know how to show it ?

The hamburger icon is basically a font right ? can you tell me how to change the used font ?

Here’s again my page : http://divines.ca/accueil-2/

Thank’s

[Author]

Posts