Image disappears after animation + window resize

Asked

Viewed 39 times

0

I’m building a menu for my blog, I found some code on the net, and I’m trying to implement one of them. The problem is this: the image (logo) disappears from the menu (header) when I do the following:

  1. I shrink the window to a cell phone size
  2. I open the menu Burger, I close again
  3. expand the window

and puff... I don’t have the logo. What am I missing? I have the code below:

CSS

     /* Interface - Mobile */

    .fa:before {
    font-family: FontAwesome;
    }

    header .bgMenu {
     height: 80px;
    background-color: #fff;
    box-sizing: border-box;
    text-align: right;
    }

header.fixedMenu {
    position: fixed;
    width: 100%;
}

.navMenu {
  z-index: -1;
  position: relative;
}



.linksMenu {
  display: none;
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
}

.linksMenu.showMenu {
  display: block;
  background-color: #148dcd;
  padding-top: 2em;
  margin-top: -2.25em;
}

.linksMenu a {
  color: #ECEFF1;
  text-align: left;
  font: 1em Oswald;
  font-family: 'Exo', sans-serif;
  padding: .8em;
  display: block;
  text-decoration: none;


}

.linksMenu a:before {
  margin: 0 1em 0 .25em;
}

.linksMenu li:nth-child(1) a {
  background-color: rgba(0,116,166,.4);
}

.linksMenu li:nth-child(2) a {
  background-color: rgba(0,116,166,.55);
}

.linksMenu li:nth-child(3) a {
  background-color: rgba(0,116,166,.7);
}

.linksMenu li:nth-child(4) a {
  background-color: rgba(0,116,166,.85);
}

.linksMenu li:nth-child(5) a {
  background-color: rgba(0,116,166,1);
}

.burgerMenu {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: #148dcd;
  border-radius: 50%;
  display: inline-block;
  margin: 15px;
}

.burger {
  top: 22px;
  right: 10px;
  opacity: 1;
}

.burger::before {
  top: 10px;
  content: "";
  display: block;
}

.burger::after {
  bottom: 10px;
  content: "";
  display: block;
}

.burger::after, .burger::before, .burger {
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  background-color: #fff;
  border-radius: 2px;
  width: 29px;
  height: 5px;
  position: absolute;
}

/* Shade from Burger Menu */

.bgShade {
  background-color: rgba(0,0,0,.75);
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  visibility: hidden;
  transition: .25s linear;
  opacity: 0;
}

.bgShade.showShade {
  opacity: 1;
  visibility: visible;
}

.bgShade.hideShade {
  opacity: 0;
  visibility: hidden;
}

/* Scroll locked */

body.bodyStopped {
  overflow: hidden;
}

/* Transition from Burger menu to X */

.burgerMenu.showMenu .burger::after{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  bottom: 0px;
}

.burgerMenu.showMenu .burger::before{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 0px;
}

.burgerMenu.showMenu .burger{
  background: rgba(111,111,111,.0);
}

/* Interface - Desktop */

@media screen and (min-width: 768px) {

  header .bgMenu {
    background-color: rgba(20,141,205,1);
  }

  div.burgerMenu {
    display: none;
  }

  .navMenu {
    z-index: 0;
  }

  .linksMenu {
    display: block;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  .linksMenu li {
    display: inline-block;
  }

  .navMenu .linksMenu li a {
    background-color: transparent;
    color: #0c547b;
    font-family: 'Exo', sans-serif;
    font-weight:bold;
    font-size: 1.3em;
    padding: 33px 1.2em 24px .8em;
    transition: .25s;
  }

  .navMenu .linksMenu li a:hover {
    color: #fff;
  }

  .navMenu.bounceOutUp {
    animation-name: unset;
  }

  .figureProfile.animated.zoomInUp img {
    max-width: inherit;
    width: 360px;
  }

  .bgShade.fadeIn,
  .bgShade.fadeOut {
    display: none;
  }
}

Jquerry

// Burger Menu transitions
var count = 0;
$(".burgerMenu").click(function() {
    count++;
    // Var to identify even or odd click
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // Odd clicks
    if (isEven(count) === false) {
        $("header").addClass("fixedMenu");
        $(".burgerMenu").addClass("showMenu");
        $(".linksMenu").addClass("showMenu");
        $(".navMenu").removeClass("bounceOutUp");
        $(".navMenu").addClass("bounceInDown");
        $(".bgShade").removeClass("hideShade");
        $(".bgShade").addClass("showShade");
        $("body").addClass("bodyStopped");
    }
    // Even clicks
    else if (isEven(count) === true) {

        //$("header").removeClass("fixedMenu"); 
        $(".burgerMenu").removeClass("showMenu");
        $(".navMenu").removeClass("bounceInDown");
        $(".navMenu").addClass("bounceOutUp");
        $(".bgShade").removeClass("showShade");
        $(".bgShade").addClass("hideShade");
        $("body").removeClass("bodyStopped");
    }
});



// Burger menu without one extra click
$('.linkHeader').click(function() {
    count++;
});

HTML

<div class="bgShade animated"></div>
            <header id="header" class="animated">


            <div class="bgMenu" style="background: #148dcd">

              <div style="padding:15px 0px 0px 15px; float:left;"><img src="http://www.doveloper.com/wp-content/uploads/2016/11/blog-logo-hover-300x90.png"
                height="60" width="200"></div>

                <div class="burgerMenu">
                <div class="burger"></div>

            </div>
            <nav class="navMenu animated">
            <ul class="linksMenu">
                <li class="cool-link" id="home-menu-button"><a href="#" class="fa fa-code">Início</a></li>
                <li class="cool-link" id="articles-menu-button"><a href="#" class="fa fa-book">Artigos</a></li>
                <li class="cool-link" id="courses-menu-button"><a href="#" class="fa fa-rocket">Cursos</a></li>
                <li class="cool-link" id="tools-menu-button"><a href="#" class="fa fa-cog">Ferramentas</a></li>
                <li class="cool-link" id="about-menu-button"><a href="#" class="fa fa-briefcase">Sobre</a></li>
            </ul>
    </nav>
  </div>
</header>

If you want to see for yourselves it’s here: http://www.doveloper.com/

jquery html css

2 answers

0

The problem is that you are adding the class .showMenu to the element $(".linksMenu") when the Burger is open and is not removing this class when the Burger is closed. In this way, was giving conflict in the elements and leaving the div da logo hidden.

The solution is to add the line below in the script, inside the block else if (isEven(count) === true) { to remove such a class:

$(".linksMenu").removeClass("showMenu");

Another thing, is to make a function that closes the Burger automatically (if open) when the window size is greater than or equal to 768px (same size as in CSS @media):

$(window).on("load resize", function(){
    if(window.innerWidth >= 768){
        $(".linksMenu").removeClass("showMenu");
        if($("nav.navMenu").hasClass("bounceInDown")){
            $(".burgerMenu").trigger("click");
        }
    }
});


// Burger Menu transitions
var count = 0;
$(".burgerMenu").click(function() {
    count++;
    // Var to identify even or odd click
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // Odd clicks
    if (isEven(count) === false) {
        $("header").addClass("fixedMenu");
        $(".burgerMenu").addClass("showMenu");
        $(".linksMenu").addClass("showMenu");
        $(".navMenu").removeClass("bounceOutUp");
        $(".navMenu").addClass("bounceInDown");
        $(".bgShade").removeClass("hideShade");
        $(".bgShade").addClass("showShade");
        $("body").addClass("bodyStopped");
    }
    // Even clicks
    else if (isEven(count) === true) {

        //$("header").removeClass("fixedMenu"); 
        $(".burgerMenu").removeClass("showMenu");
        $(".linksMenu").removeClass("showMenu");
        $(".navMenu").removeClass("bounceInDown");
        $(".navMenu").addClass("bounceOutUp");
        $(".bgShade").removeClass("showShade");
        $(".bgShade").addClass("hideShade");
        $("body").removeClass("bodyStopped");
    }
});

$(window).on("load resize", function(){
	if(window.innerWidth >= 768){
        $(".linksMenu").removeClass("showMenu");
		if($("nav.navMenu").hasClass("bounceInDown")){
			$(".burgerMenu").trigger("click");
		}
	}
});

// Burger menu without one extra click
$('.linkHeader').click(function() {
    count++;
});
/* Interface - Mobile */

    .fa:before {
    font-family: FontAwesome;
    }

    header .bgMenu {
     height: 80px;
    background-color: #fff;
    box-sizing: border-box;
    text-align: right;
    }

header.fixedMenu {
    position: fixed;
    width: 100%;
}

.navMenu {
  z-index: -1;
  position: relative;
}



.linksMenu {
  display: none;
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
}

.linksMenu.showMenu {
  display: block;
  background-color: #148dcd;
  padding-top: 2em;
  margin-top: -2.25em;
}

.linksMenu a {
  color: #ECEFF1;
  text-align: left;
  font: 1em Oswald;
  font-family: 'Exo', sans-serif;
  padding: .8em;
  display: block;
  text-decoration: none;


}

.linksMenu a:before {
  margin: 0 1em 0 .25em;
}

.linksMenu li:nth-child(1) a {
  background-color: rgba(0,116,166,.4);
}

.linksMenu li:nth-child(2) a {
  background-color: rgba(0,116,166,.55);
}

.linksMenu li:nth-child(3) a {
  background-color: rgba(0,116,166,.7);
}

.linksMenu li:nth-child(4) a {
  background-color: rgba(0,116,166,.85);
}

.linksMenu li:nth-child(5) a {
  background-color: rgba(0,116,166,1);
}

.burgerMenu {
  position: relative;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: #148dcd;
  border-radius: 50%;
  display: inline-block;
  margin: 15px;
}

.burger {
  top: 22px;
  right: 10px;
  opacity: 1;
}

.burger::before {
  top: 10px;
  content: "";
  display: block;
}

.burger::after {
  bottom: 10px;
  content: "";
  display: block;
}

.burger::after, .burger::before, .burger {
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  background-color: #fff;
  border-radius: 2px;
  width: 29px;
  height: 5px;
  position: absolute;
}

/* Shade from Burger Menu */

.bgShade {
  background-color: rgba(0,0,0,.75);
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100vw;
  visibility: hidden;
  transition: .25s linear;
  opacity: 0;
}

.bgShade.showShade {
  opacity: 1;
  visibility: visible;
}

.bgShade.hideShade {
  opacity: 0;
  visibility: hidden;
}

/* Scroll locked */

body.bodyStopped {
  overflow: hidden;
}

/* Transition from Burger menu to X */

.burgerMenu.showMenu .burger::after{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  bottom: 0px;
}

.burgerMenu.showMenu .burger::before{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  top: 0px;
}

.burgerMenu.showMenu .burger{
  background: rgba(111,111,111,.0);
}

/* Interface - Desktop */

@media screen and (min-width: 768px) {

  header .bgMenu {
    background-color: rgba(20,141,205,1);
  }

  div.burgerMenu {
    display: none;
  }

  .navMenu {
    z-index: 0;
  }

  .linksMenu {
    display: block;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

  .linksMenu li {
    display: inline-block;
  }

  .navMenu .linksMenu li a {
    background-color: transparent;
    color: #0c547b;
    font-family: 'Exo', sans-serif;
    font-weight:bold;
    font-size: 1.3em;
    padding: 33px 1.2em 24px .8em;
    transition: .25s;
  }

  .navMenu .linksMenu li a:hover {
    color: #fff;
  }

  .navMenu.bounceOutUp {
    animation-name: unset;
  }

  .figureProfile.animated.zoomInUp img {
    max-width: inherit;
    width: 360px;
  }

  .bgShade.fadeIn,
  .bgShade.fadeOut {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bgShade animated"></div>
<header id="header" class="animated">
    <div class="bgMenu" style="background: #148dcd">
        <div style="padding:15px 0px 0px 15px; float:left;"><img src="http://www.doveloper.com/wp-content/uploads/2016/11/blog-logo-hover-300x90.png" height="60" width="200"></div>
        <div class="burgerMenu">
            <div class="burger"></div>
        </div>
        <nav class="navMenu animated">
            <ul class="linksMenu">
                <li class="cool-link" id="home-menu-button"><a href="#" class="fa fa-code">Início</a></li>
                <li class="cool-link" id="articles-menu-button"><a href="#" class="fa fa-book">Artigos</a></li>
                <li class="cool-link" id="courses-menu-button"><a href="#" class="fa fa-rocket">Cursos</a></li>
                <li class="cool-link" id="tools-menu-button"><a href="#" class="fa fa-cog">Ferramentas</a></li>
                <li class="cool-link" id="about-menu-button"><a href="#" class="fa fa-briefcase">Sobre</a></li>
            </ul>
        </nav>
    </div>
</header>

0

I was able to solve the problem using this "deviation":

    $(window).on('resize', function(){


    if ($(window).width() < 768) {
       $("#logo_mobile").css("display","block");
        $("#logo_desktop").css("display","none");

    }
    else {
          $("#logo_mobile").css("display","none");
        $("#logo_desktop").css("display","block");
    }

});

This way I guarantee that the image will appear again. Theoretically this will almost never be executed because the user usually does not change the window size.

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.