Develop Reference

How to stop Menu & Button enlarging & shrinking size on clicking (Wordpress)

All the Menu & Button where there are Anchor links bubble up & down when clicking them.
Eg, when I click the submit button, it becomes big and then back to original size.
When I click the menu, it becomes small and then back to original size.
This is one of the submit buttions:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">CONTACT US</span>
</span>
</a>
</div>
Would you please let me know how to stop it?
I'm not good at coding, so it would be a big help if you could give me full code descriptions.
Thank you.

in case someone needs, I found the reason, :
I found .woocommerce-message a:hover,active in my css.
I deleted active and solved the problem.

Ontoggle change other li element

I have a ul list, where one li elements has a thumbs up, and other haves a thumbs down, when i click each of the thumbs i add a class green or red depending of the type of thumb, but only one can be active or with color, if on of them is selected i need to remove the class of the other that is given a color (green, or red)
The problem is that i cant get the element to check if has the class or not.
My code:
$('.approved').click(function (event) {
event.preventDefault();
$(this).toggleClass('bg-green');
});
$('.not-approved').click(function (event) {
event.preventDefault();
console.log($(this).parent().find('.approved').hasClass('bg-green'));
$(this).toggleClass('bg-red');
});
html:
<div class="options-tools pull-right">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-thumbs-up approved" aria-hidden="true"></i></li>
<li><i class="fa fa-thumbs-down not-approved" aria-hidden="true"></i></li>
</ul>
</div>
Basically when i click on thumbs down (.not-approved), i add the color class 'bg-red', but before i need to chech if the "thumbs up" is active(bg-green).
What im doing it wrong?

Have you tried to do $('.approved').hasClass('bg-green'). hasClass can help you identifying if an element has a specific class. This is a boolean so it will return true if it has the class, otherwise false. You do not need to get the parent and then find the class. You can just select the class if you not the identifier.

Is it possible to place bootstrap button and dropdown in different place?

<div class="dropdown" style="position:fixed">
<span class="icon dropdown-toggle" data-toggle="dropdown"></span>
</div>
<ul class="dropdown-menu" style="position:abosolute">
<li id="1"></li>
<li id="2"></li>
</ul>
I need to do something like this. That is icon in one div(fixed) and ul outside the div(absolute position) to make scrollable in page ? If I give within the same div both taking fixed position and dropdown becomes un-scrollable This is not working. How can I achieve this ?

I think the only way to get this working is by creating a Button linked with your Dropdown menu. Almost like in this Bootstrap Example.

HTML Jquery .toggle not toggling back

<div class="row">
<div class="col one-whole">
<nav class="top-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
<img src="img/title.png">
</ul>
</nav>
<nav class="burger-nav">
<ul>
<li><i class="fa fa-bars x3" aria-hidden="true"></i></li>
<li><img src="img/title.png"></li>
</ul>
</nav>
</div>
</div>
<div class="burger">
<div class="row menu">
<div class="col one-whole">
<ul>
<li>Home<i class="fa fa-times x3" aria-hidden="true"></i></li>
<li>About</li>
<li>Central Plumping</li>
<li>Roof</li>
<li>Drainage</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Hello all, currently trying to learn basic JQuery. I have managed to create a simple navigation bar, with responsive burger menu that hides and shows each navigation bar based on screen size. I then created a burger div that is 100% screen size fixed when displayed but is currently set it display:none. Now i have got my toggle working to display it, but when i try to close the menu bar, it doesn't seem to toggle back. Any help would be great thankyou.
My Jquery script is as follows:
<script>
$(document).ready(function(){
$("#toggleburger").click(function(){
$(".menu").toggle();
});
});
</script>

i guess your problem is that you're using an anchor tag with empty href attribute.
try chaging in
<i class="fa fa-times x3" aria-hidden="true"></i>
see example in this FIDDLE

I'm getting directed off when I click the element you're trying to tie the click event to.
Here's a working fiddle: https://jsfiddle.net/p85kazv0/
I've simply prevented the a element you're using from its default action (which is of course to direct someone to another location, dictated by whats in the href=""):
$("#toggleburger").click(function(e){
e.preventDefault();
$(".menu").toggle();
});

Reasons for unexpected behaviour:
<a> has href set to some other page. If you have to implement the menu or buttons that are only for in page activity you should set it as href="#". Meaning do not redirect me anywhere just perform the event linked with this action, which in your case is toggling of another div.
While e.preventDefault() is a workaround, it is not recommended here as the link is sitting there doing nothing. It would suit more if say you had a form that would submit itself but you wanted to do some processing/sanitation before submitting, thereby overriding default action with your logic.
There are two elements with id=toggleburger. Keep your id unique on one html page. This can give you a lot of pain while debugging.
Here is a working fiddle, I have replaced the hamburger image with text "ToggleBurger".

Set the href attribute of the <a> element equals to #:
<li><a href="#" id="toggleburger">

How to right align / justify bootstrap dropdown menu items?

I'm trying to align the items within a standard bootstrap dropdown menu to the right hand side within the menu. Normally they are left aligned.
I need this because I'm displaying languages that are read Right To Left (RTL).
Nothing I try seems to work properly, using "pull-right" class on any element, e.g. the <li>, <a> or <span> all fail when hovering over an item - e.g. hilight is wrong size or shape.
Note that the dropdown-menu-right class in the <ul> only aligns the whole menu container with the parent button, not the items within the menu with the container (which is what I want). Code currently is:
<ul class="dropdown-menu dropdown-menu-right">
<li><span dir="rtl">جديد ...</span></li>
<li><span dir="rtl">حفظ ...</span></li>
<li><span dir="rtl">تحميل ...</span></li>
<li><span dir="rtl">نص عادي (العادية) المشاركة ...</span></li>
<li class="divider"></li>
<li><a href="#" id="quitapp"><span dir="rtl"><i class="fa fa-close fa-lg fa-fw"></i> الإقلاع عن التدخين ...
</span></a></li>
</ul>
(Note: I need the <span dir="rtl"> to make sure text is displayed in the right direction, and want to keep the overall look of the menu (so not sure about converting to <divs> or <listgroups>)
Any suggestions / solutions much appreciated! I'm using Bootstrap 3.3.5
Many thanks

You can use style = "text-align : right;" for the a tags. It should work.