-1
I have a problem. It’s a responsive menu that expands. The menu elements are images of buttons, which glow when the mouse passes over. I did this using JS and Bootstrap. So far, so good.
The problem arises when the menu turns the sandwich button and is clicked to expand. I wanted, within the expansive menu, not to appear the images of the buttons, but rather a text in place. And when the sandwich button was gone and the menu was a bar again, the button images would appear again.
Here is the code of Navbar:
<div class="col-lg-8 col-2 offset-lg-1 order-lg-2 order-1">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler mt-3" data-toggle="collapse" data-target="#menubar">
<span class="fas fa-bars text-white"></span>
</button>
<div class="collapse navbar-collapse" id="menubar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="aeraer.html" class="nav-link" onmouseover="aerhvr(this,'on')" onmouseleave="aerhvr(this,'off')">
<img src="imagens/bt-aer.png" class="img-fluid btu" id="btaer"/>
<img src="imagens/bt-aer-on.png" class="img-fluid btu" id="btaeron"/>
</a>
</li>
<li class="nav-item">
<a href="aerlogin.html" class="nav-link" onmouseover="loginhvr(this,'on')" onmouseleave="loginhvr(this,'off')">
<img src="imagens/bt-login.png" class="img-fluid btu" id="btlogin"/>
<img src="imagens/bt-login-on.png" class="img-fluid btu" id="btloginon"/>
</a>
</li>
<li class="nav-item">
<a href="aerplay.html" class="nav-link" onmouseover="playhvr(this,'on')" onmouseleave="playhvr(this,'off')">
<img src="imagens/bt-play.png" class="img-fluid btu" id="btplay"/>
<img src="imagens/bt-play-on.png" class="img-fluid btu" id="btplayon"/>
</a>
</li>
<li class="nav-item">
<a href="aerequipe.html" class="nav-link" onmouseover="equipehvr(this,'on')" onmouseleave="equipehvr(this,'off')">
<img src="imagens/bt-equipe.png" class="img-fluid btd" id="btequipe"/>
<img src="imagens/bt-equipe-on.png" class="img-fluid btd" id="btequipeon"/>
</a>
</li>
<li class="nav-item">
<a href="aerrank.html" class="nav-link" onmouseover="rankhvr(this,'on')" onmouseleave="rankhvr(this,'off')">
<img src="imagens/bt-rank.png" class="img-fluid btd" id="btrank"/>
<img src="imagens/bt-rank-on.png" class="img-fluid btd" id="btrankon"/>
</a>
</li>
<li class="nav-item">
<a href="aercontato.html" class="nav-link" onmouseover="contatohvr(this,'on')" onmouseleave="contatohvr(this,'off')">
<img src="imagens/bt-contato.png" class="img-fluid btd" id="btcontato"/>
<img src="imagens/bt-contato-on.png" class="img-fluid btd"id="btcontatoon"/>
</a>
</li>
</ul>
</div>
</nav>
</div>
Would anyone have any idea how I might try to fix this?
Thank you very much!
EDIT: The researches I did brought me ways to exchange the images for texts, but then they remained as texts later, they were not back to images when the menu became bar again.
I’ll upload an image, to make it easier to understand, in case my text is confused.
Eduardo, your solution was almost perfect. The only problem is that the buttons did not disappear when expanding. Now, the buttons and text appear (the textual part was perfect).
– BobeCampos
You already have a solution, I believe that these details can be accomplished with css adjustments or even by changing or adding new support classes in other tags, which make the button that says it doesn’t want to appear, I hope this helps to find the solution you are looking for.
– Eduardo
From what I understand, the problem isn’t with css, it’s with Javascript. When you hover over the Nav-link, it activates the Function that makes the image shine, and then it appears.
– BobeCampos
From what I see in your code you have an event directly linked to the link <a> onmouseover="aerhvr(this,'on')" and the off
– Eduardo
It is this event that is responsible for the Hover that is triggered when the mouse passes, what can be done is to remove the trigger added directly in the <a> tag and make this event be triggered example when the class . onhover is next to . Nav-link, but then you need to change the jquery or javascript created to stay within the conditions you determine
– Eduardo
I will try to figure out how to do this (I’m still a beginner, I’m crawling). But your answer gave me a way to follow. I thank you very much.
– BobeCampos
If you remove the <a> tag onmousehover will see that the effect of when you pass the mouse will disappear. So just look at the solution of how you can apply this same event for when you really need it and not how it is, beautiful. Good luck
– Eduardo