I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
Related
This is my first question on here. Any feedback is welcome.
I'm creating a dropdown menu for the mobile version of our site and I'm running into an issue that seems quite straight forward.
In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.
It seems like the menu item is set to active and the default border/overlay is added. I don't see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don't want any changes to happen.
I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.
I also tried adding the following CSS to the element but this didn't help:
selector .menu-item {
border: none;
outline: none;
}
I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.
My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I'm not familiar with.
Many thanks in advance!
Edit: Thanks to #Alivia Pramanik for the quick and easy solution!
Welcome to SO. If I am not mistaken, you can change this with Elementor's own design. To do with this custom CSS, add this,
.elementor-nav-menu--dropdown .elementor-item:focus {
background: #0000!important;
outline: 0!important;
}
See the image for your reference
Hi I've a wordpress site and i need to modify the highlighted code to "display=flex" insted of "display=none".
But i am not able to to this because is element.style..please help me.
https://imgur.com/93zuJyU
.fep-message-content .fep-message-content-5 .fep-message-
content-own .fep-message-content-admin .fep-hide-if-js{
display:flex !important;
}
this is an accordion of front-end-pm plugin for wordpress and it is displayed none when closed and displayed block when opened. i would have it permaopened.
Is possible to change the highligthed code?
Thank you for helping. :)
My guess is that there's a javascript hiding that element after the page is loaded. So no matter what you tell the page to load, it gets altered after. I would search the theme or plugin javascripts for "fep-hide-if-js".
Hope everyone doing well!
I am making a site in WordPress through Elementor plugin. I am facing a weird issue on the button. Button has line break <br>, even I didn't add it there.
But on the other hand, the button is showing alright in Elementor dashboard, but when I do a live preview, button messed up.
I tried to deactivate all plugins and themes, but it didn't work. Need Help!
You have to assign a custom class tag to the button element, it most likely would be assigned to the div .elementor-button-wrapper, you’ll have to check it with dev tools, then you need to access the theme style on appearance/editor. So you could add the following code:
.class-used br{
display:none;
}
In case the class you assigned to the button is not in a parent tag on top of all you need to eliminate try the same process assigning the class to the column or element that wraps the button. Hope it give you an idea to solve the issue.
button or link padding, width, margin and other style won't work. Because button or link need to add display:inline-block; or display: block; then it will be work. So you need to use that display:inline-block; or display: block;. Hope it helps
I have a webpage with a simple navbar. The actual webpage can be seen here, and a CodePen demo can be seen here. In the CodePen demo, everything works fine. If I hover over a dropdown, the menu appears below. I can then seamlessly move my mouse down over that dropdown menu and select an option. In comparison, on the actual production website, things are not so smooth. The dropdown appears as expected, but as soon as I move my mouse down over the dropdown it disappears - it doesn't seem to register the hover event.
I've tried the following:
Setting z-index to be 1000 or 10000000 in the css for .dropdown
Doing step 1 with the added qualifier of !important;
In Chrome dev tools I tried giving other parts of the webpage lower z-index values, and it changed nothing
Notably, the drop-down is definitely hidden behind stuff. For example if I hover over Alumni, the options in the drop-down are occluded by the label of the website (in white font).
Is there some way other than messing with the z-index with which I can force my dropdown to register the hover event and work as expected? I am comfortable using Javascript, HTML, CSS, and any normal libraries such as Bootstrap or JQuery. Thanks!
EDIT: #lalitbhakuni's answer solved the problem for me. That said, it is possible that people who are dealing with the specifically identical circumstance to my own will run into this and wonder how to implement the CSS solution without access to the CSS for the entire web-page. Here is how I did it, in my banner code injection:
<script>
window.onload = function() {
var header = document.getElementById('header');
header.style.zIndex = 10;
};
</script>
Your header is overlapping your navbar. The y nav dropdown is not working as a result. To fix this, can, you can please define header z_index as follows:
.transparent-header #header {
z-index: 10;
}
I am using the following code to toggle my mobile navigation
html
<p>toggle</p>
I have a function which attaches the proper code/css and just need it to act as a button but not go anywhere (hence the '#').
However I want nothing to show up when it clicks/hover, since the browser usually indicates where the link is going, I don't want that (or anything else) to show
As Michael suggested, why not try using a button instead? Your code would look like this
<button class="toggle-nav"><p>toggle</p></button>
All you'd have to do is change any CSS/JS you have to reference the button instead of an a tag.
You may style the link with pointer-events.
.toggle-nav {
pointer-events: none
}
<p>toggle</p>