Archived topic
Mobile header
27 replies · Started by Pare on June 6, 2017
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
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/
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
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
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
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/
Hello, i sent the account details to Tom Usborne in contact field and received email answer today.
Awaiting for answer.
Thank you !
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
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.
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.
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
Any chance you can re-send your URL? I'll take a look for you :)
Yes it's that page : http://divines.ca/accueil-2/
Thank you
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/
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