Archived topic
Customize burger menu
27 replies · Started by Michael on March 20, 2018
Hi.
Currently don’t like the appearance of burger menu.
How do remove the word menu,
Hi.
I currently don’t like the appearance of the burger menu.
How do I;
- Remove the word menu
- instead of 3 lines make it into 2 lines.
- X (close burger menu) to be larger and thin.
Please kindly help.
Hi there,
- https://docs.generatepress.com/article/mobile-menu-label/
- You can change it with this CSS:
.main-navigation .menu-toggle:before {
content: '\f107';
}Not sure if FA has two line hamburger though. You can check it here: https://fontawesome.com/icons?d=gallery
- Can't really change the thinkness unfortuantely as it's an icon from FA. You can change the size like this:
.main-navigation.toggled .menu-toggle:before {
font-size: 20px;
}Hi Leo
1. The first code you provided is to remove word “menu” on responsive mode?
2. Second code is two change the size of the hamburger menu?
If I get css code for the hamburger menu that I want, I simply paste in the code to css?
Hi Leo
Thanks for sending the css codes, the first code you sent, removes the hamburger and left the word "menu"
which I didn't want.I'm sorry.
What If, I want to remove GP hamburger and replace it with my own.
Would you please kindly provide the css code to remove the existing hamburger, so I can add with my own css codes for the hamburger.
Once removing existing GP hamburger, can I past the below css codes to simple css and do you think it will work? If you don't mind just checking the css codes below to see if their fine, it includes animations.
It will be appreciated if you can help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 35px;
height: 2px;
background-color: white;
margin: 6px 0;
}
</style>
</head>
<body>
<p>A menu icon:</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 2px;
background-color: #222;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
</style>
</head>
<body>
<p>Click on the Menu Icon to transform it to "X":</p>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
You had three questions in the list here:
https://generatepress.com/forums/topic/customize-burger-menu/#post-524348
And I answered them in order here:
https://generatepress.com/forums/topic/customize-burger-menu/#post-524647
I believe you missed the first answer which made the rest confusing.
The code you provided above has more then just CSS and I'm not sure what they are supposed to do unfortunately.
Simply pasting those in CSS won't work.
Sorry.
They’re codes for creating a hamburger bar.
Where did you get it from? Any instruction on how to use it?
I got the source from here, but I don’t think it has instructions. It also comes with animation for the hamburger.
https://www.w3schools.com/howto/howto_css_menu_icon.asp
The links below is really what hope to have. The site has HTML,css and JavaScript for hamburger.
https://codepen.io/JoseRosario/pen/BWqMwK
The above link is from this site
http://freefrontend.com/css-hamburger-menu-icons/
If you are able to help install the hamburger from https://codepen.io/JoseRosario/pen/BWqMwK, it would be fantastic.
It's not easy unfortunately, but this topic might help: https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/
Hi Tom & Leo
Tom, I click the link you provided from your notes above.
Just want to clarify. The codes below which I got from the link you provided (https://generatepress.com/forums/topic/custom-menu-toggle-hamburger/) will remove the current default hamburger completely which includes the word “menu” too, If I paste into snippet?
add_action( 'generate_inside_mobile_menu', 'tu_hamburger_icon' );
function tu_hamburger_icon() {
?>
<span class="hamburger-box">
<span class="hamburger-inner">Menu</span>
</span>
<?php
}
I simply want to remove the current default icon GP hamburger + menu(word) next to hamburger icon and replace it with custom hamburger icon, which mentioned 3 notes above.
You can complete remove the GP mobile menu like this:
.menu-toggle:before,
.menu-toggle .mobile-menu {
display: none;
}Then to add your own HTML, do this:
add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
function tu_custom_mobile_menu() {
?>
Your HTML in here.
<?php
}I'm not sure if this will work with the specific HTML/CSS you have in mind, but it's currently the only way to add your own HTML markup to the mobile menu.
Hi, where should I paste your code, in snippet, hook or css?
.menu-toggle:before,
.menu-toggle .mobile-menu {
display: none;
}
so after when I successfully remove GP hamburger.
where should i past the html/css code?
Hi.
I managed to completely removed GP hamburger but I'm having problems using your second code.
In simple CSS, I add the html into the slot where it says "Your HTML in here" but it doesn't seem to work.
your codes
add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
function tu_custom_mobile_menu() {
?>
Your HTML in here. (this is the part I'd entered the html)
<?php
}
I've tried using the html provide from these site, but it didn't work.
https://codepen.io/JoseRosario/pen/BWqMwK
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon
I would some how like to use the hamburger and animation from https://codepen.io/JoseRosario/pen/BWqMwK
If your willing to help, I would be gratefully appreciated.
