[Resolved] a problem with jonsuh.com/hamburgers menu

[liorsade8]

do you want access to the wordpress?

[Tom]

I’m still seeing the javascript added. Can you remove it and add the CSS, then let me know so I can take a look at why it’s not working?

[liorsade8]

hi
i removed the wp_footer element
i kept the wp_head
<link href=”https://www.t-talk.co.il/wp-content/themes/generatepress_child/dist/hamburgers.css&#8221; rel=”stylesheet”>

and i kept the functions.php code:

add_action( ‘generate_inside_mobile_header_menu’, ‘tu_hamburger_icon’ );
function tu_hamburger_icon() {
?>

<span class=”hamburger-label”>תפריט</span>

<?php
}

and i put the code you gave me for the CSS:

.mobile-menu-open .hamburger–collapse .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-open .hamburger–collapse .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-open .hamburger–collapse .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

[Tom]

Do you have a caching plugin you can clear? I’m still seeing the javascript and not seeing the CSS.

[liorsade8]

no.
no caching installed yet…

[Tom]

Can you confirm the URL you made the changes on?

[liorsade8]

t-talk.co.il

[liorsade8]

this is everything inside the custom css if it’s helping:

.site-header {display:none}

@media (max-width: 1180px) {
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block;
}

.main-navigation ul,
.gen-sidebar-nav {
display: none;
}

[class*=”nav-float-“] .site-header .inside-header > * {
float: none;
clear: both;
}
}

@media (max-width: 1180px){
.menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle, .sticky-menu-logo .navigation-stick:not(.mobile-header-navigation) .menu-toggle {
display: inline-block;
clear: none;
width: auto;
float: right;
}}

.site-footer {
border-top: 2px solid #195263;
}

.site-info {
letter-spacing: 0.019em;
}

@media (min-width: 1180px) {
.main-navigation ul ul {
background-color: #ffffff;
border-top: 2px solid #195263;
border-bottom: 2px solid #195263;
}
}

.main-navigation {
border-bottom: 2px solid #195263;
}

.main-navigation .main-nav ul li a{
letter-spacing: 0.015em;
}

.menu-toggle {
font-family: ‘atlas-pro’, sans-serif !important;
}

.menu-toggle .mobile-menu,
.menu-toggle:before {
display: none;
}

body {
font-family: ‘atlas-pro’, sans-serif !important;
}

h1 {
font-family: ‘atlas-pro’, sans-serif !important;
}

h2 {
font-family: ‘atlas-pro’, sans-serif !important;
}

body.rtl #mobile-header button.menu-toggle {
position: absolute;
right: 0;
left: auto;
}

.main-navigation .navigation-logo img {
padding: 3px 0px 0px 10px;
}

@media (min-width: 768px) {
.main-navigation .site-logo.navigation-logo {
position: absolute;
left: 0;
top: 0;
}
}

@media (min-width: 768px) {
.main-navigation .site-logo.navigation-logo img {
height: auto;
}
}

.nav-aligned-right.nav-below-header .main-navigation {
position: relative;
}

.elementor-widget-slides .elementor-slide-heading {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-slides .elementor-slide-description {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-text-editor {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-testimonial .elementor-testimonial-content {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-testimonial .elementor-testimonial-name {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-widget-testimonial .elementor-testimonial-job {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-testimonial__text {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-testimonial__name {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-testimonial__title {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-button {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-tab-title {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-tab-content {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-field {
font-family: ‘atlas-pro’, sans-serif !important;
}

@media (max-width: 1180px){
.main-navigation .main-nav ul li a
{
line-height: 40px!important;
}}

.elementor-cta__description {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-price-table__heading {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-price-table__subheading {
font-family: ‘atlas-pro’, sans-serif !important;
}

.elementor-price-table__features-list li {
font-family: ‘atlas-pro’, sans-serif !important;
}

@media (max-width: 650px) {
#callnowbutton {
height: 45px;
direction: ltr;
}}

.hamburger {
padding-top: 5px;
}

@media (max-width: 650px){
#callnowbutton {
font-size: 18px;
}}

@media (max-width: 650px) {
#callnowbutton img {
height: 23px;
max-width: 100%;
padding: 0px 0px 0px 0px

}}

@media( max-width: 1180px ) {
.site-header,
#site-navigation,
#sticky-navigation {
display: none !important;
opacity: 0;
}

#mobile-header {
display: block !important;
opacity: 1;
width: 100% !important;
}

#mobile-header .menu-toggle,
#mobile-header .mobile-bar-items {
display: block;
}
}

.mobile-menu-open .hamburger–collapse .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-open .hamburger–collapse .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mobile-menu-open .hamburger–collapse .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

[Tom]

Was looking at the wrong site.

This is the CSS you need:

.mobile-menu-open .hamburger--vortex .hamburger-inner {
    transform: rotate(765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-menu-open .hamburger--vortex .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.mobile-menu-open .hamburger--vortex .hamburger-inner::before, 
.mobile-menu-open .hamburger--vortex .hamburger-inner::after {
    transition-delay: 0s;
}

.mobile-menu-open .hamburger--vortex .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
}

.mobile-menu-open .hamburger--vortex .hamburger-inner::before, 
.mobile-menu-open .hamburger--vortex .hamburger-inner::after {
    transition-delay: 0s;
}

[liorsade8]

WOW! cool man! it’s working!
grreeeeeeeeeeeeeeat!

so let me understand… because i need this hamburger in all of my sites:

i need to use functions.php code + wp_head code + this css
and dont need the script in wp_footer?

that’s it?
thanks

[Tom]

The CSS I just gave you will be different for the different effects you choose to use.

Other than that, yes. No need for the JS 🙂

[liorsade8]

great! awesome!
once again GP rocks!

[Tom]

Thanks! 🙂

[liorsade8]

hi
the hamburger menu of jonsuh.com is working, but only with vortex style
when i’m changing the style in all the codes we made:
for example i want to change the hamburger from vortex to Spring….
when i’m just changing the name it’s not working…

for example on this site: https://www.ruachgabit.co.il

the code in the elements hook:
<link href=”https://www.ruachgabit.co.il/wp-content/themes/generatepress_child/dist/hamburgers.css&#8221; rel=”stylesheet”>

the code in the functions.php:
add_action( ‘generate_inside_mobile_header_menu’, ‘tu_hamburger_icon’ );
function tu_hamburger_icon() {
?>

<span class=”hamburger-label”></span>

<?php
}

the code in the style css:
.mobile-menu-open .hamburger–vortex .hamburger-inner {
transform: rotate(765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-menu-open .hamburger–vortex .hamburger-inner::before {
top: 0;
opacity: 0;
}

.mobile-menu-open .hamburger–vortex .hamburger-inner::before,
.mobile-menu-open .hamburger–vortex .hamburger-inner::after {
transition-delay: 0s;
}

.mobile-menu-open .hamburger–vortex .hamburger-inner::after {
bottom: 0;
transform: rotate(90deg);
}

.mobile-menu-open .hamburger–vortex .hamburger-inner::before,
.mobile-menu-open .hamburger–vortex .hamburger-inner::after {
transition-delay: 0s;
}

and of course i uploaded all the directory / code of jonsuh to the child theme folder…

please help,
thanks

[Tom]

Can you change everything to spring so I can take a look? I’m seeing vortex at the moment still.

Let me know 🙂

[Author]

Posts